具有固定高度和水平滚动的HTML列布局

关注

发信

关注(28)粉丝(399)

具有固定高度和水平滚动的HTML列布局

本文介绍了具有固定高度和水平滚动的HTML列布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于一个android项目，我需要显示一个视图（WebView），它动态加载内容。
内容项目将由 JavaScript 添加的< div class =content-item> 标签c>到< div class =content-holder> 页面加载完成后。

是这样的：

列表项目

固定宽度的列。内容项不一定具有相同的高度。

任何列的高度不得超过屏幕高度。如果列已满，则会在下一列中添加更多内容（如果需要，请创建列）。将不会有空列。

页面应水平滚动（多列固定宽度），但不能垂直（高度不超过页面）。
h2_lin>解决方案

您可以遍历内容项目，检查它们是否适合列，如果它们不符合，请创建一个新列并将其余项目移动到新列......如此：

$（。content-item）。each（function（）{
//迭代内容项并查看底部是否超出容器
var bottom = $（this）.position（）。top + $（this）.height（）;
if （$< $ this（this））.parent（）。height（））{
//将其移动并将内容项移动到新列
columnShift（$（this））;
}
}）;

函数columnShift（el）{
var parent = el.parent（）;
var container = $（。content-container）;

//创建一个新列
var newCol = $（< div class ='content-holder'>< / div>）;

//获取不适合的内容项并将它们移动到新列
el.nextAll（。content-item）。appendTo（newCol）;
el.prependTo（newCol）;

//加宽父容器
container.width（container.width（）+ parent.width（））;

//将新列添加到DOM
parent.after（newCol）;
}

with html
< div class =content-container>
< div class =content-holder>
< div class =content-item>< / div>
< div class =content-item>< / div>
< div class =content-item>< / div>
< div class =content-item>< / div>
< div class =content-item>< / div>
< / div>
< / div>

包含任意数量的.content-item div，包含任意数量的内容

.content-holder {
float：left ;
width：300px;
height：300px;
border：1px solid＃000000;
overflow：hidden;
margin：5px;
padding：10px;
}

.content-item {
最大高度：280px;
overflow：hidden;
}

我相信你可以让代码更聪明，但这应该是一开始

For an android project, I need to show a view (WebView), that dynamically loads content.Content items will be <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after page has loaded.
The design is such that:
List item
Content items will be layed out in fixed-width columns. Content items do not necessarily have same height.
Height of any column must not exceed screen height. If a column is full, additional content will be put in next column(create column if necessary). There will be no empty columns. Column must not break inside a content item.
Page shall be horizontally scrollable(many columns of fixed width), but not vertically (height does not exceed page).
Any ideas on how to implement using css, javascript?
解决方案
http://jsfiddle.net/B4RPJ/
You can iterate through the content items, check if they fit in the column, and if they don't, create a new column and move the rest of the items to the new column ... like so:
$(".content-item").each( function() { // iterate the content items and see if the bottom is out of the container var bottom = $(this).position().top + $(this).height(); if ( bottom > $(this).parent().height() ) { // shift it and following content items to new column columnShift( $(this) ); } } ); function columnShift( el ) { var parent = el.parent(); var container = $(".content-container"); // create a new column var newCol = $("<div class='content-holder'></div>"); // get the content items that don't fit and move them to new column el.nextAll(".content-item").appendTo( newCol ); el.prependTo( newCol ); // widen the parent container container.width( container.width() + parent.width() ); // add the new column to the DOM parent.after( newCol ); }
with html
<div class="content-container"> <div class="content-holder"> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> </div> </div>
with an arbitrary number of .content-item divs, containing an arbitrary amount of content
and css of
.content-holder { float: left; width: 300px; height: 300px; border: 1px solid #000000; overflow: hidden; margin: 5px; padding: 10px; } .content-item { max-height: 280px; overflow: hidden; }
I'm sure you can make the code more clever, but this should be a start

这篇关于具有固定高度和水平滚动的HTML列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 06:10