두 개의 디브를 서로 나란히 놓는 방법은?

두 개의 디브를 서로 나란히 놓는 방법은?

이 질문에는 이미 다음과 같은 답이 있습니다.

옆에 있는 CSS 두 개의 디브 (13개 답변)

마감됨11개월 전에.

다음 코드를 고려합니다.

#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의 높이가 포장지의 높이를 결정해야 합니다.

CSS를 통해 어떻게 이것을 달성할 수 있습니까?

하나 또는 둘 다의 내부 디브를 플로팅합니다.

부동하는 1div:

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

두 개의 디브가 있으면, 당신은 또한 사용할 수 있습니다.display속성:

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

한다면div1특정 높이를 초과합니다.div2옆에 배치됩니다.div1밑바닥에이 문제를 해결하려면 다음을 사용합니다.vertical-align:top;에div2.

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    vertical-align:top;
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are<br/><br/><br/><br/><br/><br/></div>
    <div id="div2">next to each other.</div>
</div>

jsFiddle(예: 1).

jsFiddle(예: 2).

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

기본 방향은 행입니다.그래서, 그것은 #래퍼 안에서 서로 옆으로 정렬됩니다.그러나 IE9 이하 버전은 지원되지 않습니다.

옵션 1

사용하다float:left양쪽에div요소 및 두 div 요소 모두에 대해 총 너비가 100%인 %를 설정합니다.

사용하다box-sizing: border-box;부동 소수점 요소에서.값 테두리 상자는 패딩과 테두리를 확장하는 대신 너비와 높이로 강제 적용합니다.

에서 clearfix 사용<div id="wrapper">래퍼 div 스케일을 올바른 높이로 만드는 부동 하위 요소를 지웁니다.

.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">요소는 하위 요소를 절대적으로 위치시킵니다.<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요소 및 두 div 요소 모두에 대해 총 너비가 100%인 %를 설정합니다.

그리고 다시 (와 동일)float:left예) 사용box-sizing: 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/ #flex=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

솔루션은 다음과 같습니다.

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

이것이 CSS3 정답입니다.이것이 지금 당신에게 어떻게든 도움이 되기를 바랍니다:D 저는 당신이 그 책을 읽는 것을 정말 추천합니다:https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 사실 저는 지금 이 책을 읽고 이 해결책을 만들었습니다. :D

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

그것은 매우 쉽습니다 - 당신은 그것을 어려운 방법으로 할 수 있습니다.

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

그 밖에도 수많은 방법들이 있습니다.
하지만 난 그냥 쉬운 방법으로.에 있는 답들이 . 제가 두 모두 5에서 합니다. 하지만 제가 보여드린 두 가지 방법 모두 적어도 HTML 5에서는 작동합니다.

아래의 코드 변경 사항을 사용하여 두 개의 디브를 서로 앞에 배치합니다.

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle 링크

1. 더하다float:left;양 디브의 속성.

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>

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

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

언급URL : https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other