Làm thế nào để đặt hai div cạnh nhau?

Hãy xem xét các mã sau đây :

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

Tôi muốn hai div nằm cạnh nhau bên trong div Wrapper. Trong trường hợp này, chiều cao của div xanh sẽ xác định chiều cao của trình bao bọc.

Làm thế nào tôi có thể đạt được điều này thông qua CSS?

Nổi một hoặc cả hai div bên trong.

Nổi một 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 */
}

hoặc nếu bạn thả nổi cả hai, bạn sẽ cần khuyến khích div trình bao bọc chứa cả những đứa trẻ nổi, hoặc nó sẽ nghĩ nó trống và không đặt đường viền xung quanh chúng

Nổi cả hai 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 */
}

Có hai div

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

bạn cũng có thể sử dụng displaytài sản:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

ví dụ jsFiddle ở đây .

Nếu div1vượt quá một độ cao nhất định, div2sẽ được đặt bên cạnh div1ở phía dưới. Để giải quyết điều này, sử dụng vertical-align:top;trên div2.

ví dụ jsFiddle ở đây .

Bạn có thể ngồi các phần tử cạnh nhau bằng cách sử dụng thuộc tính float CSS:

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

Bạn cần đảm bảo rằng div trình bao bọc cho phép nổi theo chiều rộng và lề vv được đặt chính xác.

Cố gắng sử dụng mô hình flexbox. Nó rất dễ dàng và ngắn để viết.

Live Jsfiddle

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

hướng mặc định là hàng. Vì vậy, nó thẳng hàng cạnh nhau bên trong #wrapper. Nhưng nó không được hỗ trợ IE9 hoặc ít hơn các phiên bản đó

đây là giải pháp:

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

bản demo của bạn được cập nhật;

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

lựa chọn 1

Sử dụng float:lefttrên cả hai divphần tử và đặt% width cho cả hai phần tử div với tổng chiều rộng kết hợp là 100%.

Sử dụng box-sizing: border-box;trên các phần tử div nổi. Hộp viền giá trị buộc phần đệm và viền vào chiều rộng và chiều cao thay vì mở rộng nó.

Sử dụng Clearfix trên <div id="wrapper">để xóa các phần tử con nổi sẽ làm cho tỷ lệ div của trình bao bọc đến chiều cao chính xác.

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

Lựa chọn 2

Sử dụng position:absolutetrên một yếu tố và chiều rộng cố định trên yếu tố khác.

Thêm vị trí: liên quan đến <div id="wrapper">phần tử để làm cho các phần tử con vị trí tuyệt đối với <div id="wrapper">phần tử.

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

Lựa chọn 3

Sử dụng display:inline-blocktrên cả hai divphần tử và đặt% width cho cả hai phần tử div với tổng chiều rộng kết hợp là 100%.

Và một lần nữa (giống như float:leftví dụ) sử dụng box-sizing: border-box;trên các phần tử div. Hộp viền giá trị buộc phần đệm và viền vào chiều rộng và chiều cao thay vì mở rộng nó.

LƯU Ý: các phần tử khối nội tuyến có thể có các vấn đề về khoảng cách vì nó bị ảnh hưởng bởi các khoảng trắng trong đánh dấu HTML. Thêm thông tin tại đây: https://css-tricks.com/fighting-the-space-b between-line-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/

Tùy chọn cuối cùng sẽ là sử dụng tùy chọn hiển thị mới có tên flex, nhưng lưu ý rằng khả năng tương thích trình duyệt có thể xuất hiện để chơi:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplech CHƯƠNG / áo choàng.html

Cố gắng sử dụng các thay đổi mã bên dưới để đặt hai div trước mặt nhau

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

Liên kết JSFiddle

Nó rất dễ dàng - bạn có thể làm điều đó một cách khó khăn

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

hoặc cách dễ dàng

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

Cũng giống như một triệu cách khác.
Nhưng tôi chỉ với cách dễ dàng. Tôi cũng muốn nói với bạn rằng rất nhiều câu trả lời ở đây là không chính xác Nhưng cả hai cách mà tôi đã chỉ ra ít nhất đều hoạt động trong HTML 5.

Đây là câu trả lời CSS3 đúng. Hy vọng điều này sẽ giúp bạn bằng cách nào đó ngay bây giờ: D Tôi thực sự khuyên bạn nên đọc cuốn sách: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Thật ra tôi đã thực hiện giải pháp này từ việc đọc cuốn sách này ngay bây giờ . : 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. Thêm float:left;tài sản trong cả hai div.

2. Thêm display:inline-block;tài sản.

3. Thêm display:flex;tài sản trong div cha.

Cách tiếp cận của tôi:

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

Trong UI vật liệu và Reac.js, bạn có thể sử dụng lưới

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