elementi posizione intorno un altro con i CSS

Question

voglio raggiungere questo risultato con HTML e CSS:

Se la scatola rossa è un grande contenuto (Un contenuto PDF), e quelli blu organizzare intorno ad esso . Prima al suo fianco e poi, quando c'è abbastanza spazio, sotto di esso.

La mia struttura HTML è la seguente, ma posso cambiarlo:

<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> 

Ormai, il posizionamento rimane in questo modo:

non so se questo è possibile senza creare due contenitori (uno sul lato, uno sotto), cosa che posso fare, ma mi farebbe scrivere un sacco di JS.

Answer 1

Si potrebbe fare qualcosa di simile per le voci di elenco, naturalmente, non è reattivo, ma è possibile utilizzare% o di media query per ottimizzarlo.

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

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

Answer 2

È possibile controllare la struttura della griglia già fornita da bootstrap. In alternativa puoi anche provare a raggiungere questo obiettivo usando l'float : left per tutti gli elementi quadrati.

Answer 3

È possibile ottenere ciò che si desidera facendo galleggiare tutti gli elementi e diventare fratelli l'uno dell'altro.

#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

Io personalmente non userei galleggianti. Suggerisco un tipo di colonna/riga di layout. ecco un violino: http://jsfiddle.net/xa91f4Lw/

basta usare display: inline-block e fare uso di semplici div s quando si desidera qualcosa di essere un nuovo "riga"

---

nuovo violino: http://jsfiddle.net/xa91f4Lw/1/

o questo: http://jsfiddle.net/xa91f4Lw/2/