Wie man zwei <div>...</div> in der gleichen Zeile?

Ich meine, die zwei tags haben die gleiche Höhe.

InformationsquelleAutor Keating Wang | 2010-12-02

  1. 11

    Versuchen, diese für alle divs.

    display:inline-block;
    +1 display:inline nicht flexibel genug und Schwimmer sind chaotisch!

    InformationsquelleAutor Ives.me

  2. 9

    Einfach: verwenden <span>s statt.

    <div> standardmäßig haben display: block, was bedeutet, das nächste element wird auf eine neue Zeile.

    Können Sie display: inline um das Verhalten, das Sie möchten. Aber denken Sie daran, dass ein inline - <div> ist nur ein <span>.

    InformationsquelleAutor Yuval Adam

  3. 2

    Schweben Sie mit css:

    float: left

    InformationsquelleAutor simshaun

  4. 2

    Verwenden Sie einen div container und darin alle deine divs.

    .div_container{
    display: flex;
    flex-direction: row;
}

    Einfach!

    InformationsquelleAutor Abraxas

  5. 1

    Machen Sie schweben:

    HTML

    
<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>

    CSS

    
.clear { clear: both; }
.container1, .container2 { float: left; }

    Müssen Sie deaktivieren Sie das float.. so verwenden klar beide 🙂

    InformationsquelleAutor mark_dj

  6. 1

    Float vermasselt mir die Seite zentriert ausrichten. Hier ist, was ich habe, ich will 2 und 3 auf der gleichen Zeile, ohne die Seite zentrieren. Float funktioniert nicht, weil wenn ich die Größe des Browsers,es bewegt sich mit ihm.

    <head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
   background: #faa;
   width: 500;
 }

.div2 {
  background: #ffc;
  width: 400;
  margin-right: 100px;
}
.div3 {
  background: #cfc;
  width: 100;
  margin-left: 400px;

}


</style>
</head>

<html>
<body>
<center>

<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>

</center>
</body>
</html>

    InformationsquelleAutor Jose Balboa

Schreibe einen Kommentar