[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;
}

여기에 jsFiddle 예제가 있습니다 .

경우 div1특정 높이를 초과 div2옆에 배치됩니다 div1아래쪽에. 이 문제를 해결하려면 vertical-align:top;on을 사용하십시오 div2.

여기에 jsFiddle 예제가 있습니다 .

답변

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*/
}

데모가 업데이트되었습니다.

http://jsfiddle.net/dqC8t/1/

답변

옵션 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;
}

JSFiddle 링크