webentwicklung-frage-antwort-db.com.de

Div nebeneinander ohne Schwimmer

Wie kann ich machen, dass div 'left' und 'right' wie Spalten nebeneinander aussehen? 

Ich weiß, ich kann Float verwenden: Links auf ihnen und das wird funktionieren ... aber auf Schritt 5 und 6 hier http://www.barelyfitz.com/screencast...s/positioning/ . Der Kerl sagt, dass es möglich ist, ich kann es aber nicht zum Laufen bringen ...

Code:

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>
60

Die übliche Methode, wenn floats nicht verwendet wird, ist display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Beachten Sie jedoch die Einschränkungen: Nach dem ersten Block gibt es ein zusätzliches Leerzeichen. Dies liegt daran, dass die beiden Blöcke jetzt im Wesentlichen inline-Elemente sind, wie a und em, also Leerzeichen zwischen den beiden Zählwerten. Dies könnte Ihr Layout zerstören und/oder nicht schön aussehen, und ich würde es vorziehen, nicht alle Leerzeichen zwischen den Charakteren zu streichen. 

Floats sind in den meisten Fällen auch flexibler. 

98
Yi Jiang

Eine div ist ein Block-Level-Element , das heißt, dass es sich als Block verhält, und Blöcke können nicht nebeneinander bleiben, ohne geschoben zu werden. Sie können sie jedoch auf Inline-Elemente setzen mit:

display:inline-block;

Versuche es...


Eine andere Möglichkeit ist, sie zu platzieren mit:

position:absolute;
left:0;

und/oder

position:absolute;
right:0;

Note: Damit dies wie erwartet funktioniert, muss das Wrapper-Element einen position:relative; haben, damit die Elemente mit absoluter Positionierung relativ zu ihrem Wrapper-Element bleiben.

19
Zuul

Sie können auch das CSS3-Layout flexbox verwenden, das gut unterstützt heutzutage unterstützt wird.

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

Siehe Beispiel (mit älteren Styles für maximale Kompatibilität) und Weitere Informationen über Flexbox.

2
Oriol

Ich arbeite gerade daran, und ich habe bereits eine Reihe von Lösungen ... Es ist schön, eine qualitativ hochwertige Website zu haben, die ich auch für meine Bequemlichkeit verwenden kann. Wenn Sie diese Dinge nicht aufschreiben , Sie werden irgendwann einige Teile vergessen ... und ich kann Ihnen auch empfehlen, einige Grundfunktionen aufzuschreiben, wenn Sie mit einer neuen Programmierung beginnen.

Wenn die Float-Funktionen Probleme verursachen, gibt es einige Optionen, die Sie ausprobieren können.

Ändern Sie die div-Ausrichtung im div-Tag wie folgt: <div class="kosher" align=left>.__ Wenn dies nicht passt, gibt es eine andere Option mit einem solchen Rand.

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

Vergessen Sie nicht, den <div align=left> zu entfernen.

2

Sie können mit Marge für rechts div versuchen

margin: -200px 0 0 350px;
1
giker

Verwenden Sie display:table-cell;, um Leerzeichen zwischen .Links und .Right zu entfernen

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>

0
Mehdi