如何在页面中放置html div以便在页面上不留空间

我正在创建一个html页面，其中正文由多个div框组成。每个盒子都有以下样式，宽度固定，400px，这是我的屏幕的1/3，但高度不固定。所以我的屏幕可以水平放置三个这样的盒子。我还使用了float：left，这样，如果有一些空间，这些方框总是会填充右边的空间。但它仍然没有达到我想要的。如何在页面中放置html div以便在页面上不留空间

我使用php脚本动态创建div框。当一个最右边的div框比B最高的div框的高度大于同一行中的最左边的div框时，则下一个div表示包含的C进入A的底部，其顶部水平低于B的底部水平，所以巨大的A和C之间留有空间。那么如何去除这个空间呢？

我应该使用哪些CSS，以便所有div都相应地放置它们，以便页面上不留空间。

.respost { 
    margin-left: 10px;; 
    width: 400px; 
    float: left; 
    border-bottom: solid blue; 
    border-top: solid blue; 
    border-left: solid blue; 
    border-right: solid blue; 
    margin-top: 30px; 
    word-wrap: break-word; 
}

来源

2013-03-10 Shashwat Kumar

试试这个css-tricks.com/seamless-responsive-photo-grid – Sachin 2013-03-10 21:32:54

谢谢，它真的有窍门。 – 2013-03-10 21:52:58

目前，有几种方法可以做到这一点。首先，您可以在HTML中使用单独的列。这可能很尴尬，虽然因为你想追加div，就像使用for循环一样。

在此场景中，你将有三列在HTML中，像这样：

<div class="column_wrapper"> 
    <div class="column column1"> 
    ... 
    </div> 
    <div class="column column2"> 
    ... 
    </div> 
    <div class="column column3"> 
    ... 
    </div> 
</div>

然后列1，2的CSS和3，可以是：

.column { 
    width: 400px; 
    float: left; 
}

，你可以在PHP中添加转换列之一：

$count = 0; 
$columns = array(0=> [], 1=> [], 2=> []); 
foreach ($items as $item) { 
    $columns[$count++ % 3][] = $item; 
}

更好的选择，如果你不介意在页面中添加jQuery ，就是用jQuery Masonry。

来源

2013-03-10 21:44:31

上面的代码比没有使用表格更糟糕。尽管砌体类型的代码工作。 – 2013-03-10 21:53:59

如何在页面中放置html div以便在页面上不留空间

回答

相关问题