it-swarm.com.de

Wie bekomme ich diese beiden Divs nebeneinander?

Ich habe zwei Divs, die nicht verschachtelt sind, untereinander. Sie befinden sich beide in einem übergeordneten div, und dieses übergeordnete div wiederholt sich. Also im Wesentlichen:

<div id='parent_div_1'>
<div class ='child_div_1'></div>
<div class ='child_div_2'></div>
</div>

<div id='parent_div_2'>
<div class ='child_div_1'></div>
<div class ='child_div_2'></div>
</div>

<div id='parent_div_3'>
<div class ='child_div_1'></div>
<div class ='child_div_2'></div>
</div>

Ich möchte jedes Paar von child_div_1 und child_div_2 nebeneinander legen. Wie kann ich das machen?

78
Justin Meltzer
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Überprüfen Sie das Funktionsbeispiel unter http://jsfiddle.net/c6242/1/

63
Hussein

Da divs standardmäßig block elements sind - dh sie nehmen die gesamte verfügbare Breite ein, versuchen Sie es mit -

display:inline-block;

Die Variable div wird jetzt inline gerendert, d. H. Sie unterbricht nicht den Fluss von Elementen, wird jedoch immer noch als Blockelement behandelt.

Ich finde diese Technik einfacher als das Ringen mit floats. 

In diesem Tutorial finden Sie weitere Informationen - http://learnlayout.com/inline-block.html . Ich würde sogar die vorherigen Artikel empfehlen, die zu diesem führen. (Nein, ich habe es nicht geschrieben)

101
Robin Maben

Ich fand den folgenden Code sehr nützlich, er könnte jedem helfen, der hier sucht

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

36
axs

Am besten funktioniert das für mich:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

4
jiantongc

Den Stil verwenden

.child_div_1 {
    float:left
}
3
amit_g

Mit Flexbox ist das ganz einfach!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Fiddle Beispiel

2
Sol

Benutzer float:left-Eigenschaft in der untergeordneten Div-Klasse 

Überprüfen Sie die Div-Struktur im Detail: http://www.dzone.com/links/r/div_table.html

1
Pranay Rana

Flexbox verwenden

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
0
dasfdsa