2015-06-05 8 views
6

Desidero rendere allineate 3 colonne alla stessa altezza tutto il tempo anche quando ridimensiono la finestra. Il problema è che la terza colonna non si allinea alle prime due colonne. Questo succede quando ho raggiunto 1190 larghezza.Rendere allineate 3 colonne di testo alla stessa altezza o linea sempre mentre si ridimensiona la finestra

<footer> 
<div class="f-container"> 
    <div class="container"> 
     <div class="f-item-3col"> 
      <h3>Location</h3> 
      <p>123 My Street, city postal code QC</p> 
     </div><!-- 
    --><div class="f-item-3col"> 
      <h3>Around the web</h3> 
      <p>social media here</p> 
     </div><!-- 
    --><div class="f-item-3col"> 
      <h3>About this site</h3> 
      <p>This website is designed and developed by [your name here].</p> 
     </div> 
    </div> 
</div> 
<div class="f-container-bottom"> 
    <div class="container"> 
     <div class="row"><div class="f-item-bottom">Copyright &copy; [website name] 2015</div> 
    </div> 
<div> 

CSS

footer { 
    text-align: center; 
    color: #fff; 
} 

footer h3 { 
    text-transform: uppercase; 
    margin-bottom: 30px; 
} 

.f-container { 
    position: relative; 
    width: 100%; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding-top: 50px; 
    background-color: #2c3e50; 
} 

.f-container .f-item-3col { 
    display: inline-block; 
    width: 33.33333333%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    margin-bottom: 50px; 
} 

.f-container-bottom { 
    padding: 25px 0; 
    background-color: #233140; 
} 

.f-container-bottom .f-item-bottom { 
    width: 100%; 
} 

@media (max-width: 768px) { 
    .f-container .f-item-3col { 
     display: block; 
     width: 100%; 
    } 
} 

Questo è anche possibile? Scusa per il mio cattivo inglese.

+0

è possibile creare [demo] (http://www.jsfiddle.net) o fornire il collegamento del sito Web, sarebbe più facile risolvere il problema. – divy3993

+0

Questa è la demo [collegamento] (http://jsfiddle.net/#&togetherjs=yi6x1PxLDC). Penso che la soluzione Vivek sia giusta. C'è qualche soluzione? – raydg

risposta

5

visualizzare i div 'in blocco e fluttuare quelli a sinistra.

.f-container .f-item-3col 
{ 

    display:block; 
    float:left; 
    width: 33.33333333%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    margin-bottom: 50px; 

} 
+0

Grazie per il vostro aiuto ragazzi! – raydg

+0

Siete i benvenuti !!! –

Problemi correlati