如何选择包装的HTML元素?

时间:2012-08-08 14:01:23

标签: html css overflow textwrapping

假设你有一个容器(div)和一堆嵌套的内联块或浮动的div http://jsfiddle.net/D6PgE/

.container { width : 300px; }
.inner     { width : 100px; }

<div class="container">
    <div class="inner"> 1 </div>
    <div class="inner"> 2 </div>
    <div class="inner"> 3 </div>
    <div class="inner"> 4 </div>
    <div class="inner"> 5 </div>
    <div class="inner"> 6 </div>
    <div class="inner"> 7 </div>
    <div class="inner"> 8 </div>
    <div class="inner"> 9 </div>
</div>

选择已包装的元素的最佳方法是什么? 是否可以选择包装行的第n个元素(在小提琴中,这将是奇数。)

我唯一能想到的就是使用JS并比较元素的offsetTop位置;但是我最近没有跟上CSS并且知道它变得越来越强大,那么是否有CSS解决方案? -Thanks


修改
我试图选择“行”的第n个元素。问题是没有行,因为这不是表。我还应该补充一点,我的例子很简单,因为宽度可能很大,所以每行可能有更多或元素 - 因此nth-child之类的东西不起作用

2 个答案:

答案 0 :(得分:4)

不,没有CSS解决方案可以使用未知/动态大小,因为选择器无法根据元素的布局方式或样式的计算方式进行选择。

您需要使用JS来获取和处理这类信息。

答案 1 :(得分:-1)

一个简单的CSS3解决方案就是使用     nth-child 选择。 我用几个例子http://jsfiddle.net/D6PgE/6/更新了你的小提琴。

供进一步参考:http://www.w3schools.com/cssref/sel_nth-child.asp