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 © [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.
è possibile creare [demo] (http://www.jsfiddle.net) o fornire il collegamento del sito Web, sarebbe più facile risolvere il problema. – divy3993
Questa è la demo [collegamento] (http://jsfiddle.net/#&togetherjs=yi6x1PxLDC). Penso che la soluzione Vivek sia giusta. C'è qualche soluzione? – raydg