Quando la dimensione del browser viene modificata/su dispositivi di dimensioni diverse, ho bisogno di un insieme di elementi html che siano tutti semanticamente correlati per rimanere insieme e spostarsi in un blocco. Cioè, se uno degli elementi si sposta sulla successiva "riga" a causa della loro larghezza insufficiente a contenere l'intero raggruppamento, TUTTO dovrebbe spostarsi verso il basso.È possibile raggruppare una serie di elementi HTML in modo che si muovano insieme?
IOW, questo è un po 'come l'attributo "conserva insieme" che alcuni raggruppamenti di elementi in un documento di elaborazione testi hanno.
Per essere un po 'più specifico, dire che ho collezioni dei seguenti elementi:
1) an anchor tag, filling out a first "column"
2) a collection of tags, to the right of the anchor tag, consisting of:
(a) a div, followed by a <br/>
(b) a cite, followed by a <br/>
(c) another div, followed by a <br/>
(d) two or three anchor tags that are aligned side-by-side at the bottom of the second "column"
Quindi, per riassumere, se non c'è abbastanza spazio per il secondo "colonna" in una "fila, "piuttosto che mantenere la prima" colonna "e spostare gli elementi nella seconda colonna fino alla successiva" riga ", la prima nella colonna dovrebbe aderire ai suoi fratelli e rimanere sempre sulla stessa" riga "con loro (I metto "riga" e "colonna" tra virgolette perché non sto usando una tabella html, e quelle esistono solo in senso virtuale).
Se si sta trovando questo un po 'difficile da visualizzare (io non ti biasimo), controlla il violino: http://jsfiddle.net/W7CYC/8/
Nota: avvolgendo i raggruppamenti in HTML5 s non ha aiutato.
Ecco il codice:
HTML:
<div class="yearBanner">2013</div>
<section>
<a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/0299186342"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>
<div id="prizeCategory" class="category">BIOGRAPHY</div>
<br/>
<cite id="prizeTitle" class="title">Son of the Wilderness: The Life of John Muir</cite>
<br/>
<div id="prizeArtist" class="author">Linnie Marsh Wolfe</div>
<br/>
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>
<section>
<a class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/0299186342"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>
<div class="category">BIOGRAPHY</div>
<br/>
<cite class="title">Son of the Wilderness: The Life of John Muir</cite>
<br/>
<div class="author">Linnie Marsh Wolfe</div>
<br/>
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>
CSS:
body {
background-color: black;
}
.floatLeft {
float: left;
padding-right: 20px;
padding-left: 5px;
}
.yearBanner {
font-size: 3em;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
padding-top: 64px;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
width: 160px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
jQuery:
$('#prizeCategory').text("Changed Category");
$('#prizeTitle').text("Changed Title that spans two rows");
$('#prizeArtist').text("Changed Author and co-author");
$('#mainImage img').attr("src", "http://ecx.images-amazon.com/images/I/61l0rZz6mdL._SY300_.jpg");
$('#mainImage img').attr("height", "200");
Forse pubblicare una prima/dopo immagine, come io ho idea wat si sta descrivendo qui, e ho letto tutta la posta . –
Sì, uno screenshot che mostra quello che vuoi che faccia sembrare farebbe una grande differenza. Difficile dire a questo punto esattamente quello che stai cercando di fare. –
Stai solo provando a far rientrare tutto all'interno del tag per raggrupparlo in modo che l'intero elemento si sposti alla riga successiva? –