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