내부 div 팝업에서 2 divs를 나란히 만드는 방법은 무엇입니까?

Question

사용자가 상호 작용할 수있는 팝업 상자가있는 프로젝트에서 작업 중입니다. 팝업 상자에 서로 옆에 2 블록의 콘텐츠를 넣으려고합니다. 나는 해답을 찾고 있었지만 일반적인 해결책 중 어느 것도 여기에서 작동하지 않는 것 같습니다. 나는 float : left, display : inline-block 등을 시도했다. 유일한 효과는 정확한 너비와 높이를 설정하고 두 번째 컨테이너에 여백을 적용하는 것이다. 그러나 나는이 해킹 - y를 피하고 싶다. 해결책.

HTML :

<div id="equip-robot-modal" class="modal"> 

<div id="equip-robot-modal-content" class="modal-content"> 

    <div id="equip-modal-content-inner" class="modal-content-inner"> 

     <div id="robot-info-content"> 

      <header id="equip-header"> 

       <h2 id="equip-header-text">Robot Name Header</h2> 

      </header> 


     </div><!-- #robot-info-content --> 

     <div id="inventory-list-content"> 

      <div id="inventory-list-container"> 

       <p> 
       put more content here 
       </p> 

      </div><!-- #inventory-list-container --> 

      <div id="auto-match-container"> 

       <button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button"> 
        <?php //echo langMatch(
          //'PLAYER_SELECTOR_AUTO_MATCH'); ?> 
          Go to Store 
       </button> 

      </div><!-- #auto-match-container --> 

     </div><!-- #inventory-list-content -->    

    </div><!-- #equip-modal-content-inner --> 

</div><!-- #equip-robot-modal-content --> 

CSS :

#robot-info-content { 
    min-width: 500px; 
    padding: 10px; 
    position: relative; 
    float: left; 
    background-color: red; 
} 

#robot-image { 
    padding: 20px 0; 
} 

#modal-progress-bars { 
    min-height: 75%; 
} 

#inventory-list-content { 
    min-width: 400px; 
    padding: 10px; 
    display: inline-block; 
    float: left; 
    background-color: purple; 
} 

#inventory-list-container { 
    width: 100%; 
    height: 430px; 
    border: 1px solid black; 
    overflow-y: scroll; 
} 


.modal-content { 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 350px; 
    height: auto; 
    transform: translate(-50%, -50%); 
    background-color: #f7f7f7; 
    color: black; 
    border: 2px solid black; 
    overflow: visible; 
} 

.modal-content-inner { 
    margin: 20px 50px; 
    text-align: center; 
} 

.modal-content-inner header { 
    background-color: white; 
    border: 1px solid black; 
    padding: 10px 50px; 
    margin: 0 auto; 
} 

가 바이올린을 참조하십시오 https://jsfiddle.net/kqa25wgv/

내가 모달 콘텐츠 내에서이 개 콘텐츠 된 div를 떠 싶습니다 내부 div. 어떤 제안?

Answer 1

다음은 저에게 도움이되는 몇 가지 값입니다.

.modal-content { 
    width: 800px;} 

#robot-info-content { 
    width: 50%; 
    float: left; 
    background-color: red; 
} 

#inventory-list-content { 
    width: 50%; 
    float: left; 
    background-color: purple; 
} 

#inventory-list-container { 
    height: 430px; 
    border: 1px solid black; 
} 

.modal-content-inner { 
    margin: 20px 50px; 
    text-align: center; 
} 

.modal-content-inner header { 
    background-color: white; 
    border: 1px solid black; 
} 

당신은 내가 800 픽셀로 .modal 컨텐츠 클래스의 폭을 설정 한 것을 알 수 있습니다 : 나는 모든 불필요한 것들을 제거. 이는 임의적이며 원하는대로 변경할 수 있습니다 (또는 포함 된 div의 백분율로 설정). 중요한 변경 사항은 최소 너비 설정을 너비 설정으로 바꾸고 백분율로 설정하는 것입니다. 문제는 두 개의 내부 div가 컨테이너에 비해 너무 넓어서 두 번째 줄이 다음 줄로 넘어가서 말하는 것입니다.

물론 내 콘텐츠 div에 패딩 및/또는 여백을 사용하면 동일한 문제없이 50 %로 설정할 수 없습니다.

실험하려는 다른 항목은 한쪽 콘텐츠 div를 왼쪽으로, 다른 한쪽을 오른쪽으로 떠는 것입니다. 양쪽 모두를 왼쪽으로 띄우면 컨테이너의 전체 너비를 차지하는 한 (그리고 너비 전체를 초과하지 않는 한) 차이를 만들지 않습니다. 여백과 패딩에 정적 값을 사용하기 시작할 때 까다로울 수 있으므로 실험을해야합니다. (여백과 채우기에 백분율 값을 사용할 수도 있습니다. 덜 복잡 할 수 있습니다.)