Positionselemente um eine andere mit CSS

Question

Ich möchte dieses Ergebnis mit HTML und CSS erreichen:

Wo die rote Box einen großen Inhalt ist (A PDF-Inhalt) und die blauen drum herum organisieren . Zuerst an seiner Seite und dann, wenn genug Platz ist, darunter.

Meine HTML-Struktur ist wie folgt, aber ich kann es ändern:

<div id="outerContainer"> 
    <div id="bigRedBox"></div> 
    <div> 
     <ul id="blueContentList"> 
      <li class="blueContent"></li> 
      <li class="blueContent"></li> 
      <li class="blueContent"></li> 
      <li class="blueContent"></li> 
      <li class="blueContent"></li> 
     </ul> 
    </div> 
</div> 

Inzwischen bleibt die Positionierung wie folgt aus:

Ich weiß nicht, ob dies ist möglich, ohne zwei Container aufzustellen (einen auf der Seite, einen darunter), was ich tun kann, aber würde mich viele JS schreiben lassen.

Answer 1

Sie könnten für die Listeneinträge etwas tun, natürlich, es ist nicht ansprechbar ist, aber man kann% oder Medienabfragen verwenden, es zu optimieren.

#blueContentList li{ 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    margin: 10px; 
    float: left; 
} 

http://jsfiddle.net/tomsarduy/ywms6soq/

Answer 2

Sie können die Grid-Struktur überprüfen, die bereits von Bootstrap bereitgestellt wird. Alternativ können Sie auch versuchen, dies zu erreichen, indem Sie auf alle quadratischen Elemente float : left anwenden.

Answer 3

Sie können erreichen, was Sie wollen, indem Sie alle Elemente schweben und Geschwister voneinander haben.

#bigRedBox { 
 
    width:80%; 
 
    height:150px; 
 
    background-color:red; 
 
    float:left; 
 
    margin:5px; 
 
} 
 
.blueContent { 
 
    width:15%; 
 
    height:50px; 
 
    background-color:blue; 
 
    float:left; 
 
    margin:5px; 
 
}

<div id="outerContainer"> 
 
    <div id="bigRedBox"></div> 
 
    <div class="blueContent"></div> 
 
    <div class="blueContent"></div> 
 
    <div class="blueContent"></div> 
 
    <div class="blueContent"></div> 
 
    <div class="blueContent"></div> 
 
</div>

Answer 4

Ich persönlich würde nicht schwimmt verwenden. Ich empfehle einen Spalten-/Zeilentyp des Layouts. hier ist eine Geige: http://jsfiddle.net/xa91f4Lw/

nur display: inline-block verwenden und die Verwendung von einfachen div s machen, wenn Sie etwas Neues "Reihe"

---

neue Geige sein wollen: http://jsfiddle.net/xa91f4Lw/1/

oder dies: http://jsfiddle.net/xa91f4Lw/2/