在网格中定位元素

您需要在620px宽的DIV（.container）内部有几个200px宽的DIV（.item）。在网格中定位元素

.container DIV应连续适合3个.item DIV。
.item DIV应该彼此完全相距10px。
.container DIV和它旁边的.item DIV边界之间不应有空格。

看到下图更好地理解。

你将如何实现它 - 利润率，桌子......？

alt text

来源

2011-01-12 Emanuil Rusev

你可以给每一个第三项附加类？ – polarblau 2011-01-12 12:56:42

满意使用css3？ – 2011-01-12 12:58:46

我认为重要的是要知道你的元素（620px的dic）是什么，以及你希望这个元素如何与邻居进行交互，因为如果你需要位置，做你想要的东西可能会有所不同：绝对或位置：相对等。 – 2011-01-12 13:00:47

，你可以尝试以下方法，但这样一来，你将不得不增加一个 '面具'，但没必要对CSS3，也不添加/删除类取决于项目的位置（换句话说，不需要任何类型的脚本，只需要纯html/css）：

HTML：

<div class='mask'> 
    <div class='container'> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
    </div> 
</div>

CSS：

.mask{border:10px solid #ddd;width:620px;overflow:hidden} 
.container{width:630px;background-color:#333;margin-top:-10px;overflow:hidden;float:left} 
.item{float:left;margin-right:10px;width:200px;height:100px;background-color:#4a6b82;margin-top:10px}

试一下：Demo

来源

2011-01-12 13:55:15 Dan

无需表。除非是表格数据，否则。

浮动每个div，给它所需的宽度和边距，并确保行中的最后一个div没有此边距。您可以使用类来完成此操作，也可以使用css :nth-child(3)伪选择器。由于缺少对这个选择器的支持，我会为它推荐一个类。

还有一件事：如果所有的div都有相同的高度，这可以正常工作。如果他们不这样做，您可能会在各种浏览器中遇到一些奇怪的定位。解决此问题的最佳方法是将每行的三个div放在一个行div中。

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    <div class="item last"/> 
    </div> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    </div> 
</div>

CSS：

.item { float: left; width: 200px; margin-right: 10px; } 
.last { margin-right: 0; }

来源

2011-01-12 13:04:45

在网格中定位元素

回答

相关问题