it-swarm.com.de

CSS nebeneinander geteilt mit Pixel- und Prozentbreiten

Ich habe zwei Divs (nebeneinander) in einem übergeordneten Div. Ich möchte, dass das rechte Div 100% des verbleibenden Platzes belegt (d. H. 100% - 200px) und sollte immer neben dem linken Div bleiben (nicht unter dem linken Div):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>
19
Faizal Balsania

Da Sie nur eine Spalte mit fester Breite haben, verschieben Sie sie nach links und das ist es. Geben Sie für die zweite Spalte nicht float und width an. dies stellt sicher, dass es 100% breit ist. Sie müssen jedoch einen linken Rand hinzufügen. andernfalls stört die zweite Säule die schwimmende Säule, z.

  • hinter dem blauen Hintergrund wird ein blauer Hintergrund angezeigt. (Deaktivieren Sie den blauen Hintergrund, um zu sehen, was ich meine.)
  • wenn die zweite Spalte höher als die erste ist, wird zusätzlicher Inhalt unter der ersten Spalte angezeigt.
<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>
40
Salman A

machen Sie den übergeordneten Wrapper zu float. Außerdem möchten Sie wahrscheinlich den width: 100% in der zweiten untergeordneten Div entfernen. Und lassen Sie die Breite durch die Menge des Inhalts im Inneren festlegen. Oder Sie könnten Prozentsatz für beide untergeordneten Divs haben. Beispiel 30% und 70%.

Demo hier

2
erickb

Fügen Sie Positionseigenschaften zu Ihrem rechten Div hinzu. Das linke div 200px und das rechte div belegen den verbleibenden Platz.

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/EpA5F/1/

2
Hussein

Ok, also in neueren Browsern können wir display: box verwenden; und Box-Flex: 1, ... Eigenschaften. Ich verwende dies derzeit in einem Webprojekt, in dem nur Chrome benötigt wird. Daher hat diese neue CSS3-Sache viele Probleme für mich gelöst.

Wenn Sie möchten, dass die richtige div eine konstante Breite hat:

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

Und CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

Funktioniert gut ohne Grenzen

JSFiddle

0
ZuzEL

ihr linkes Div sollte nach links gleiten und seine Pixelbreite unter Verwendung der relativen Position. Dein rechter Div sollte nur eine relative Position haben und vielleicht einen Überlauf verbergen. Dies sollte Ihr Problem beheben. Verwenden Sie nicht das div, das den Schwimmer löscht.

Die akzeptierte Antwort ist gut, aber ich hatte ein Problem, bei dem die rechte Spalte meine Unternavigation unterlag, da sie ebenfalls schwebte.

Mit modernen Browsern können Sie jetzt alle Elemente schweben lassen und mit coolerem CSS den gleichen Effekt erzielen. Verwenden von "width: calc (100% - 380px)" bedeutet, dass Sie Ihre Elemente schweben lassen, sie richtig positionieren und cool aussehen können ...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Demo http://jsfiddle.net/auUB3/1/

0
Colin Wiseman