Wie setzt man einige Divs in eine Reihe?

Question

Ich versuche, zwei Divs ohne Zeilenumbruch dazwischen einzufügen.

dies ist die html:

        <div id="header">
            <div id="logo"></div>

            <div id="left">
                <div id="slideshow"></div>
            </div>

        </div>

und dies ist das CSS:

    #header {
    background-color: #13768a;
    width: 962px;
    height: 207px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}

#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    }

    #left {
    width:712px;
    height: 207px;
}

#slideshow {
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}

Das Problem ist, dass ich möchte, dass es wie folgt aussieht: Wie ich es haben möchte

Aber es sieht so aus: So sieht es aus

Answer 1

Dies wird gesteuert durch die display Stil-Eigenschaft. Normalerweise, div Elemente verwenden display: block . Sie können verwenden display: inline o display: inline-block wenn Sie sie auf derselben horizontalen Linie haben wollen.

Beispiel mit inline-block ( Live-Kopie | Quelle ):

CSS:

.ib {
  display: inline-block;
  border: 1px solid #ccc;
}

HTML:

<div class="ib">Div #1</div>
<div class="ib">Div #2</div>

Answer 2

Einführen einer float CSS-Eigenschaft. Ändern Sie CSS wie unten, für #logo y #left .

#logo {
  background-image:url('logo.png');
  height: 207px;
  width: 250px;
  margin-right: 0px;
  padding: 0px;
  float:right;
}

#left {
  width:712px;
  height: 207px;
  float:left;
}

---

Von der MDN-Dokumentation ,

Les Schwimmer CSS-Eigenschaft gibt an, dass ein Element aus dem normalen Fluss entnommen und an der linken oder rechten Seite seines Containers platziert werden soll, wo Text und Inline-Elemente um das Element herum angeordnet werden.

Answer 3

Div-Elemente verwenden normalerweise display:block die einen Zeilenumbruch vor und nach dem Element erzwingt; wenn Sie die Zeilenumbrüche entfernen möchten, können Sie display:inline die die Elemente horizontal anzeigt, die Eigenschaft display des Divs auf display:inline o display:inline-block waagerecht erscheinen soll.

Answer 4

Versuchen Sie es auf diese Weise:

#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    float:right;}

#left {
    position:relative;
    width:712px;
    height: 207px;
}

#slideshow {
    position:absolute;
    top:20px;
    left:20px;
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}

Im Grunde genommen habe ich eine float:right; auf das Logo, um es richtig zu positionieren, und fügte dann position:relative à la #left div und position:absolute à la #slideshow div. Auf diese Weise können Sie die top y left Attribute, um die Diashow an der gewünschten Stelle zu positionieren.

Answer 5

display:inline ist der css-Stil, den Sie verwenden müssen.