İki div'i yan yana nasıl yerleştirebilirim?

Aşağıdaki kodu göz önünde bulundurun :

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

İki divin sarıcı div içinde yan yana olmasını istiyorum. Bu durumda, yeşil divin yüksekliği sargının yüksekliğini belirlemelidir.

Bunu CSS ile nasıl başarabilirim?

Bir veya her iki iç divayı yüzdürün.

Bir div yüzer:

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

ya da her ikisini birden yüzerseniz, sarıcı div'ı her iki yüzen çocuğu da içermesi için teşvik etmeniz gerekir, yoksa boş olduğunu düşünür ve sınırlarını etrafına koymaz

Her iki div de yüzer:

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

İki div olması,

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

displayözelliği de kullanabilirsiniz :

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle örneği burada .

Eğer div1belirli bir yüksekliğe aştığında, div2yanına yerleştirilmiş olan div1alt. Bu sorunu çözmek için kullanmak vertical-align:top;üzerine div2.

jsFiddle örneği burada .

CSS float özelliğini kullanarak öğeleri yan yana yerleştirebilirsiniz:

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

Sarıcı div öğesinin genişlik açısından kayan öğelere izin verdiğinden ve kenar boşluklarının vb. Doğru ayarlandığından emin olmanız gerekir.

Flexbox modelini kullanmaya çalışın. Yazmak kolay ve kısadır.

Canlı Jsfiddle

CSS:

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

varsayılan yön satırdır. Böylece #wrapper içinde yan yana hizalanır. Ancak IE9 veya bu sürümlerden daha az desteklenmez

İşte çözüm:

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

demo güncellendi;

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

seçenek 1

float:leftHer iki divöğede de kullanın ve toplam genişliği% 100 olan her iki div öğesi için bir% genişliği ayarlayın.

box-sizing: border-box;Kayan div öğelerinde kullanın . Kenarlık değeri değeri dolguyu ve kenarlıkları genişletmek yerine genişlik ve yüksekliğe zorlar.

Sarıcı <div id="wrapper">div ölçeğini doğru yüksekliğe getirecek olan kayan alt öğeleri temizlemek için üzerinde clearfix kullanı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%;
}

http://jsfiddle.net/dqC8t/3381/

seçenek 2

position:absoluteBir elemanda, diğer elemanda sabit genişlikte kullanın .

Konum ekle: <div id="wrapper">alt öğelerin öğeye kesinlikle konumlandırmasını sağlamak için <div id="wrapper">öğeye göre.

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

Seçenek 3

display:inline-blockHer iki divöğede de kullanın ve toplam genişliği% 100 olan her iki div öğesi için bir% genişliği ayarlayın.

Ve yine ( float:leftörnekle aynı ) box-sizing: border-box;div öğelerinde kullanın . Kenarlık değeri değeri dolguyu ve kenarlıkları genişletmek yerine genişlik ve yüksekliğe zorlar.

NOT: satır içi blok öğelerinde HTML işaretlemesindeki boşluklardan etkilendiği için boşluk sorunları olabilir. Daha fazla bilgi burada: 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/

Son seçenek, flex adlı yeni görüntüleme seçeneğini kullanmak olacaktır, ancak tarayıcı uyumluluğunun oynamak için gelebileceğini unutmayın:

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

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

İki div'i birbirinin önüne yerleştirmek için aşağıdaki kod değişikliklerini kullanmaya çalışın

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

JSFiddle bağlantısı

Çok kolay - zor yoldan yapabilirsin

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

ya da kolay yoldan

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

Milyonlarca başka yol daha var.
Ama sadece kolay yoldan yapardım. Ayrıca, buradaki yanıtların çoğunun yanlış olduğunu söylemek isterim Ama her iki şekilde de en azından HTML 5'te çalıştım.

Bu doğru CSS3 cevabı. Umarım bu size bir şekilde yardımcı olur: D Kitabı okumanızı gerçekten tavsiye ederim: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Aslında bu çözümü şimdi bu kitabı okuyarak yaptım . : 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;Her iki div'de de özellik ekleyin .

2. display:inline-block;Mülk ekleyin .

3. display:flex;Üst div'de özellik ekleyin .

Benim yaklaşımım:

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

Malzeme kullanıcı arayüzünde ve reakt.js'de ızgarayı kullanabilirsiniz

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