2016-07-01 2 views
0

Ich habe die klassische zwei divs Side-by-Side-Problem, die ich habe in der Regel kein Problem mit (float: links beide divs und add a klar: beide div nach ihnen).2 divs, nebeneinander, mit rechts div Aufnahme Rest von mit div

Meine Anforderungen machen dies komplizierter zu lösen ...

ich die linke div, als eine Spalte besetzen möchte, auf der linken Seite des umschließenden div (die linke Hand div hält eine Zahl, dh '1.')

Ich möchte, dass das rechte div den verbleibenden Platz rechts vom linken div belegt - und vor allem möchte ich, dass es NICHT unter das linke div fällt wenn es nicht genügend Platz gibt. Stattdessen möchte ich, dass das rechte div in Position bleibt und der Text innerhalb von WRAP bleibt und rechts vom linken div bleibt. Sicherlich ist das einfach!

Ich möchte keine willkürlichen Breitenwerte einstellen, da die Länge der Zahl im linken Div variieren wird, was sich auf den Abstand zwischen der Zahl und dem rechten Text auswirkt.

Hier ist ein Beispiel html:

<div class="popup-container"> // set to width: 300px; in css 
    <div class="popup-text"> 
     <div class="float-left"> 
      <h3>2.<.h3> 
     </div> 
     <div class="float-left"> 
      <h3>Example text here, long enough to wrap around<.h3> 
     </div> 
     <div class="clear"></div> 
    </div> 
</div> 

Und die CSS:

.popup-container { 
     width: 300px; 
} 

.popup-text h3 { 
    line-height: 1.25; 
    padding: 0px 8px 0px 0px; 
} 

.float-left { 
    float: left; 
} 

.clear { 
     clear: both; 
} 

OK, denke ich, dass es sich handelt. Wenn jemand weiß, wie man das linke div als Spalte operieren lässt, gegen die der Text im rechten div linksbündig bleibt (anstatt "unter" das linke div zu fallen), wäre das eine Schwellung.

BEARBEITEN Danke für alle Antworten. Ich hätte erwähnen sollen (!!) es muss in IE8 funktionieren. Ich kenne. Aber es tut es wirklich. Große Organisation, die ihre Maschinen leider nicht aktualisiert.

Antwort

1

Flexbox und CSS Tabellen können beide tun.

Unterstützung

Flexbox Eis IE10 +

CSS Tabellen sind IE8 +


Flexbox

.popup-container { 
 
     width: 300px; 
 
     border:1px solid grey; 
 
} 
 

 
.popup-text { 
 
    display: flex; 
 
} 
 

 
.popup-text h3 { 
 
    line-height: 1.25; 
 
    padding: 0px 8px 0px 0px; 
 
} 
 

 
.left { 
 
    flex: 0 0 auto; 
 
    background: #c0ffee; 
 
} 
 

 
.right { 
 
    flex:1; 
 
    background: yellow; 
 
}
<div class="popup-container"> 
 
    <div class="popup-text"> 
 
     <div class="left"> 
 
     <h3>2.</h3> 
 
     </div> 
 
     <div class="right"> 
 
     <h3>Example text here, long enough to wrap around</h3> 
 
     </div> 
 
    </div> 
 
</div>

CSS Tabellen

.popup-container { 
 
     width: 300px; 
 
     border:1px solid grey; 
 
} 
 

 
.popup-text { 
 
    display: table 
 
} 
 

 
.popup-text h3 { 
 
    line-height: 1.25; 
 
    padding: 0px 8px 0px 0px; 
 
} 
 

 
.left { 
 
    background: #c0ffee; 
 
    display: table-cell; 
 
} 
 

 
.right { 
 
    background: yellow; 
 
    display: table-cell; 
 
}
<div class="popup-container"> 
 
    <div class="popup-text"> 
 
     <div class="left"> 
 
     <h3>2.</h3> 
 
     </div> 
 
     <div class="right"> 
 
     <h3>Example text here, long enough to wrap around</h3> 
 
     </div> 
 
    </div> 
 
</div>

1

Verwenden display:flex;

.popup-container { 
 
    width: 300px; 
 
} 
 
.popup-container .popup-text { 
 
    display: flex; 
 
} 
 
.popup-text h3 { 
 
    line-height: 1.25; 
 
    padding: 0px 8px 0px 0px; 
 
} 
 
.float-left { 
 
    float: left; 
 
} 
 
.clear { 
 
    clear: both; 
 
}
<div class="popup-container"> 
 
    <!-- set to width: 300px; in css --> 
 
    <div class="popup-text"> 
 
    <div class="float-left"> 
 
     <h3>2.</h3> 
 
    </div> 
 
    <div class="float-left"> 
 
     <h3>Example text here, long enough to scroll</h3> 
 
    </div> 
 
    <div class="clear"></div> 
 
    </div> 
 
</div>

0

Hier ist eine Lösung mit display: flex

.popup-container { 
 
    width: 300px; 
 
    background-color: coral; 
 
} 
 
.popup-text { 
 
    display: flex; 
 
} 
 
.popup-text div.two { 
 
    flex: 1; 
 
    background-color: cornflowerblue; 
 
} 
 
.popup-text h3 { 
 
    line-height: 1.25; 
 
    padding: 0px 8px 0px 0px; 
 
}
<div class="popup-container"> 
 
    <!-- set to width: 300px; in css --> 
 
    <div class="popup-text"> 
 
    <div class="one"> 
 
     <h3>2.</h3> 
 
    </div> 
 
    <div class="two"> 
 
     <h3>Example text here, long enough to scroll</h3> 
 
    </div> 
 
    </div> 
 
</div>

Verwandte Themen