动态HTML DIV，超过float：left;

我有几个不同大小的DIV元素，当页面被填充时（从左到右）我希望DIV元素在下一行垂直和水平缩小。动态HTML DIV，超过float：left;

说明欠佳，但我有一个演示页面，您可以看看帮助，如果你能帮助:) http://www.techonline.co.nz/modules/navigator/navto.php?unique_ID=16

它看起来坏的上下格差距较大，特别是如果你展开DIV在右侧。我想让它看起来整洁和紧凑。

我从来没有很好的设计，所以任何帮助将不胜感激。

来源

2012-10-02 TolMera

你的HTML是相当坏......创建一个JS小提琴，我也许能帮助你。 –

@ user1287480您是否找到该插件的帮助？ – freebird

什么是JS小提琴？是的HTML（查看源代码html）格式不正确，它是动态的，在脚本中看起来不错，但输出很糟糕。 – TolMera

创建2个div的，你的内容进去。一个你做出留下了浮动，另外一个浮动的权利。在这些div中放置您的内容框。所以在你的情况。

CSS：

#left {float: left;} 
#right {float: right;}

和你的HTML：

<div id="left"> 
    <div class="divby2">Title 1 and rest of content</div> 
    <div class="divby2">Title 3 and rest of content</div> 
</div> 

<div id="right"> 
    <div class="divby2">Title 2 and rest of content</div> 
</div>

这样，你的标题3格，不会看DIV 2的位置，但它的外观到1区。举个例子，我是怎么做的，看看here

来源

2012-10-02 09:09:10 Dorvalla

嘿好选择，谢谢，应该是明显的:)谢谢。 – TolMera

你可能想看看Jquery masonry plugin

来源

2012-10-02 09:03:29 freebird

谢谢，我没有意识到JQuery库是如此之小。我必须进一步调查。 – TolMera

.................................... ........

嗨现在用于Even和奇数rules抛CSS作为这样

.divby2:nth-child(even) {float:left;} 
.divby2:nth-child(odd) {float:right}

来源

2012-10-02 09:11:48

太棒了，看起来很简单。谢谢。 – TolMera

动态HTML DIV，超过float：left;

回答

相关问题