Когда размер браузера изменяется/на устройствах различного размера, мне нужен набор элементов html, которые все семантически связаны, чтобы оставаться вместе и перемещаться в блоке. То есть, если один из элементов переместится к следующей «строке» из-за того, что их недостаточно для того, чтобы содержать всю группу, ВСЕ это должно двигаться вниз.Можно ли группировать набор элементов html, чтобы они перемещались вместе?
IOW, это похоже на атрибут «держать вместе», который имеет некоторые группировки элементов в документе обработки текстов.
Чтобы быть немного более конкретно, сказать, что у меня есть коллекции следующих элементов:
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"
Так, чтобы подвести итог, если не хватает места для второго «колонки» в «строке, «вместо того, чтобы хранить в первом столбце» и перемещать элементы во втором столбце до следующей «строки», в первом столбце должны быть соблюдены его братья и всегда оставаться в одной и той же «строке» с ними (I «Я помещаю« строку »и« столбец »в кавычки, потому что я не использую таблицу html, и они существуют только в виртуальном смысле).
Если вы находите это немного трудно представить себе (я не виню вас), проверьте скрипку: http://jsfiddle.net/W7CYC/8/
Примечание: Обертывание группировки Into html5 s не помогло.
Вот код:
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");
Может быть, оставить до/после картины, как я не имею ни малейшего представления о ват вы здесь с описанием, и я прочитал весь пост , –
Да, скриншот, показывающий, что вы хотите, чтобы он выглядел, сыграет большую роль. Трудно сказать в этот момент именно то, что вы хотите сделать. –
Вы просто пытаетесь получить все внутри тега для обертывания, чтобы сгруппировать его, чтобы весь элемент обернулся к следующей строке? –