두 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 링크

매우 쉽습니다-어려운 방법으로 할 수 있습니다

.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%;
}

<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>

또는 쉬운 방법

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    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>

백만 가지 다른 방법도 있습니다.
그러나 나는 쉬운 방법으로 할 것입니다. 또한 여기에 많은 답변이 잘못되었다고 말하고 싶지만 HTML 5에서 적어도 작동하는 두 가지 방법이 있습니다.

이것이 올바른 CSS3 답변입니다. 이 지금은 어떻게 든 도움이되기를 바랍니다 : D 정말 책을 읽어보실 것을 추천은 : https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 사실은 내가 지금이 책을 읽고에서이 솔루션을 만들었습니다 . :디

#wrapper{
  display: flex;
  flex-direction: row;
  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>

1. float:left;두 div 모두에 속성을 추가하십시오 .

2. display:inline-block;속성을 추가하십시오 .

3. display:flex;부모 div에 속성을 추가하십시오 .

내 접근 방식 :

<div class="left">Left</div>
<div class="right">Right</div>

CSS :

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

재질 UI 및 react.js에서 그리드를 사용할 수 있습니다

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>