1

这不起作用：

给定这样的 HTML：

<body>
<div class="list">
    <span class=" level">hello</span>
    <span class="logic-english">world!</span>
</div>
<div class="list">
    <span class=" level">Or should</span>
    <span class="logic-english">I say....</span>
</div>
<div class="list">
    <span class=" level">something else</span>
    <span class="logic-english">such as...</span>
</div>
<div class="list">
    <span class=" level">Goodbye</span>
    <span class="logic-english">world!</span>
</div>
</body>

一个CSS：

body { width: 100%; }
.list { border: 1px solid #333; margin: 3px; }

.list { font-size: 0.8em; min-width: 50% ; display: inline; }
.list:nth-child(4n+3), .list:nth-child(4n+4) { background: #FFAAAA; width: 100%; }

演示小提琴在这里。

另外，如何使我的 2 个跨度分别填充其父级宽度的 50%？

4

1 回答 1

4

将元素设置为display:inline-block并减小宽度以考虑边距。您可能希望使用像素移动到更固定的宽度，以使.list元素占据容器的一半。

CSS

.list { 
    font-size: 0.8em; 
    min-width: 47% ; 
    display: inline-block; 
}
.list:nth-child(4n+3), .list:nth-child(4n+4) { 
    background: #FFAAAA; 
    width: 47%; 
}

工作示例 http://jsfiddle.net/4zddx/11/

于 2013-05-03T00:24:30.557 回答