[html] 두 div를 서로 옆에 배치하는 방법은 무엇입니까?
다음 코드를 고려하십시오 .
#wrapper {
width: 500px;
border: 1px solid black;
}
#first {
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
래퍼 div 내에서 두 div가 서로 옆에 있기를 바랍니다. 이 경우 녹색 div의 높이가 래퍼의 높이를 결정해야합니다.
CSS를 통해 어떻게 이것을 달성 할 수 있습니까?
답변
하나 또는 두 개의 내부 div를 플로트합니다.
하나의 div 부동 :
#wrapper {
width: 500px;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 300px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
또는 둘 다 플로팅하는 경우 래퍼 div가 플로팅 된 자식을 모두 포함하도록 권장하거나 비어 있다고 생각하고 테두리를 두지 않습니다.
두 div 모두 부동 :
#wrapper {
width: 500px;
border: 1px solid black;
overflow: hidden; /* add this to contain floated children */
}
#first {
width: 300px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
float: left; /* add this */
}
답변
두 개의 div가 있으면
<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>
당신은 또한 display
속성을 사용할 수 있습니다 :
#div1 {
display: inline-block;
}
#div2 {
display: inline-block;
}
경우 div1
특정 높이를 초과 div2
옆에 배치됩니다 div1
아래쪽에. 이 문제를 해결하려면 vertical-align:top;
on을 사용하십시오 div2
.
답변
CSS float 속성을 사용하여 서로 옆에 요소를 배치 할 수 있습니다.
#first {
float: left;
}
#second {
float: left;
}
래퍼 div가 너비 측면에서 부동을 허용하고 여백 등이 올바르게 설정되어 있는지 확인해야합니다.
답변
flexbox 모델을 사용해보십시오. 쓰기 쉽고 빠릅니다.
라이브 Jsfiddle
CSS :
#wrapper {
display: flex;
border: 1px solid black;
}
#first {
border: 1px solid red;
}
#second {
border: 1px solid green;
}
기본 방향은 행입니다. 따라서 #wrapper 내부에서 나란히 정렬됩니다. 그러나 IE9 이하는 지원되지 않습니다.
답변
해결책은 다음과 같습니다.
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}
데모가 업데이트되었습니다.
답변
옵션 1
float:left
두 div
요소 모두에 사용 하고 총 너비가 100 % 인 두 div 요소 모두에 % 너비를 설정하십시오.
box-sizing: border-box;
부동 div 요소에 사용하십시오 . border-box 값은 패딩과 테두리를 확장하는 대신 너비와 높이로 만듭니다.
<div id="wrapper">
래퍼 div 크기를 올바른 높이로 조정하는 부동 하위 요소를 지우 려면에 clearfix를 사용하십시오 .
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#first, #second{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#wrapper {
width: 500px;
border: 1px solid black;
}
#first {
border: 1px solid red;
float:left;
width:50%;
}
#second {
border: 1px solid green;
float:left;
width:50%;
}
http://jsfiddle.net/dqC8t/3381/
옵션 2
position:absolute
한 요소에는 사용 하고 다른 요소에는 고정 너비를 사용하십시오.
<div id="wrapper">
자식 요소를 요소에 절대적으로 배치하려면 요소에 position : relative를 추가하십시오 <div id="wrapper">
.
#wrapper {
width: 500px;
border: 1px solid black;
position:relative;
}
#first {
border: 1px solid red;
width:100px;
}
#second {
border: 1px solid green;
position:absolute;
top:0;
left:100px;
right:0;
}
http://jsfiddle.net/dqC8t/3382/
옵션 3
display:inline-block
두 div
요소 모두에 사용 하고 총 너비가 100 % 인 두 div 요소 모두에 % 너비를 설정하십시오.
그리고 다시 ( float:left
예 와 동일 ) box-sizing: border-box;
div 요소에 사용하십시오. border-box 값은 패딩과 테두리를 확장하는 대신 너비와 높이로 만듭니다.
참고 : 인라인 블록 요소는 HTML 마크 업의 공백에 영향을 받기 때문에 간격 문제가있을 수 있습니다. 자세한 내용은 https://css-tricks.com/fighting-the-space-between-inline-block-elements/
#first, #second{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#wrapper {
width: 500px;
border: 1px solid black;
position:relative;
}
#first {
width:50%;
border: 1px solid red;
display:inline-block;
}
#second {
width:50%;
border: 1px solid green;
display:inline-block;
}
http://jsfiddle.net/dqC8t/3383/
마지막 옵션은 flex라는 새로운 디스플레이 옵션을 사용하는 것이지만 브라우저 호환성은 다음과 같습니다.
http://caniuse.com/#feat=flexbox
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
답변
아래 코드 변경 사항을 사용하여 두 div를 서로 앞에 배치하십시오.
#wrapper {
width: 500px;
border: 1px solid black;
display:flex;
}