Po zmianie rozmiaru przeglądarki/na urządzeniach o różnych rozmiarach, potrzebuję zestawu elementów HTML, które są semantycznie powiązane, aby pozostać razem i przenieść się w bloku. Oznacza to, że jeśli jeden z elementów przejdzie do następnego "rzędu" z powodu ich niewystarczającej szerokości, aby pomieścić całe ugrupowanie, WSZYSTKO powinno się przesunąć w dół.Czy można pogrupować zestaw elementów HTML, aby mogły się poruszać razem?
IOW, jest to coś w rodzaju atrybutu "zachowaj razem", które mają niektóre grupy elementów w dokumencie przetwarzania tekstu.
się być nieco bardziej specyficzny, że mam zbiory następujących elementów:
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"
Więc Podsumowując, jeśli nie ma wystarczająco dużo miejsca dla drugiego „kolumny” w „wierszu, "zamiast trzymać w pierwszej" kolumnie "i przesuwać elementy w drugiej kolumnie w dół do następnego" rzędu ", w pierwszej kolumnie należy trzymać się rodzeństwa i zawsze pozostać z nim w tym samym" rzędzie "(I wstawia "wiersz" i "kolumnę" w cudzysłowach, ponieważ nie używam tabeli html, a te istnieją tylko w sensie wirtualnym).
Jeśli znalezienie tego trochę trudno wyobrazić (Nie winię cię), sprawdź na skrzypcach: http://jsfiddle.net/W7CYC/8/
Uwaga: owijanie ugrupowania język HTML5 s nie pomogło.
Oto kod:
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");
Może umieścić przed/po zdjęciu, a nie mam pojęcia wat opisujesz tutaj, i czytałem przez całą postu . –
Tak, zrzut ekranu, który pokazuje, jak chcesz wyglądać, zrobiłby wielką różnicę. Trudno powiedzieć w tym momencie, co dokładnie chcesz zrobić. –
Czy próbujesz umieścić wszystko wewnątrz znacznika w celu jego zawinięcia, aby cały element został zawinięty do następnej linii? –