Khi kích thước trình duyệt được thay đổi/trên các thiết bị có kích thước khác nhau, tôi cần một tập hợp các phần tử html có tất cả các ngữ nghĩa liên quan để giữ nguyên và di chuyển trong một khối. Đó là, nếu một trong những yếu tố di chuyển đến "hàng" tiếp theo do họ không đủ chiều rộng để chứa toàn bộ nhóm, TẤT CẢ của nó nên di chuyển xuống.Có thể nhóm một tập hợp các phần tử html để chúng di chuyển cùng nhau không?
IOW, đây giống như thuộc tính "giữ liên tục" mà một số nhóm mục trong tài liệu xử lý văn bản có.
Để có một chút cụ thể hơn, nói rằng tôi có bộ sưu tập của các yếu tố sau:
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"
Vì vậy, để tổng hợp, nếu không có đủ chỗ cho các "cột" thứ hai trong một "liên tiếp, "thay vì giữ trong cột" đầu tiên "và di chuyển các phần tử trong cột thứ hai xuống hàng" tiếp theo ", cột đầu tiên phải tuân thủ các anh chị em của nó và luôn ở trên cùng một hàng" "với chúng (I "đặt" hàng "và" cột "trong dấu ngoặc kép bởi vì tôi không sử dụng một bảng html, và những người chỉ tồn tại trong một ý nghĩa ảo).
Nếu bạn đang tìm kiếm này một ít khó khăn để hình dung (Tôi không đổ lỗi cho bạn), hãy kiểm tra các fiddle: http://jsfiddle.net/W7CYC/8/
Lưu ý: gói các nhóm thành html5 s không giúp đỡ.
Dưới đây là các mã:
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");
lẽ viết trước/sau bức tranh, như tôi đã không có ý tưởng wat bạn được mô tả ở đây, và tôi đã đọc qua toàn bộ bài . –
Vâng, ảnh chụp màn hình hiển thị những gì bạn muốn nó trông giống như sẽ tạo ra sự khác biệt lớn. Khó để nói vào thời điểm này chính xác những gì bạn đang tìm kiếm để làm. –
Bạn chỉ đang cố gắng thu thập mọi thứ bên trong thẻ để được nhóm lại với nhau sao cho toàn bộ phần tử kết thúc tốt đẹp với dòng tiếp theo? –