จะวาง 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 ทั้งสองอยู่ติดกันภายใน wrapper div ในกรณีนี้ความสูงของ div สีเขียวควรกำหนดความสูงของ wrapper

ฉันจะทำสิ่งนี้ผ่าน CSS ได้อย่างไร?

ลอยหนึ่งหรือทั้งสอง divs ภายใน

ลอยหนึ่ง 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 wrapper มีทั้งเด็กที่ลอยหรือมันจะคิดว่ามันว่างเปล่าและไม่ได้ใส่ชายแดนล้อมรอบพวกเขา

ลอยทั้ง divs:

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

ตัวอย่าง jsFiddle ที่นี่

คุณสามารถนั่งองค์ประกอบที่อยู่ติดกันโดยใช้คุณสมบัติ CSS float:

#first {
float: left;
}
#second {
float: left;
}

คุณต้องตรวจสอบให้แน่ใจว่า div wrapper อนุญาตให้มีการลอยในแง่ของความกว้างและตั้งระยะขอบ ฯลฯ อย่างถูกต้อง

ลองใช้รุ่น 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%

ใช้box-sizing: border-box;กับองค์ประกอบ div ที่ลอยอยู่ กล่องค่าขอบบังคับให้ช่องว่างภายในและขอบเป็นความกว้างและความสูงแทนที่จะขยาย

ใช้ clearfix บน<div id="wrapper">เพื่อล้างองค์ประกอบลูกที่ลอยซึ่งจะทำให้มาตราส่วนของ wrapper เป็นความสูงที่ถูกต้อง

.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องค์ประกอบและตั้งค่าความกว้าง% สำหรับองค์ประกอบทั้งสองด้วยความกว้างรวม 100%

และอีกครั้ง (เหมือนfloat:leftตัวอย่าง) ใช้box-sizing: border-box;กับองค์ประกอบ div กล่องเส้นขอบค่าบังคับให้ช่องว่างภายในและขอบเป็นความกว้างและความสูงแทนที่จะขยายออก

หมายเหตุ:องค์ประกอบแบบอินไลน์บล็อกอาจมีปัญหาการเว้นวรรคเนื่องจากได้รับผลกระทบจากช่องว่างในมาร์กอัป 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 หวังว่านี่จะช่วยคุณได้อย่างใดตอนนี้: ฉันขอแนะนำให้คุณอ่านหนังสือ: 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>

1. เพิ่มfloat:left;คุณสมบัติในทั้งสอง divs

2. เพิ่มdisplay:inline-block;คุณสมบัติ

3. เพิ่มdisplay:flex;คุณสมบัติใน parent 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>