0

我有一组 div 作为行，它们可以是可变宽度，因为它们位于可调整大小的容器内。div 包含 4 组我想并排显示的元素。在这 4 个组中，其中 2 个组需要是可变宽度，而另外 2 个是固定的。除了最后一组没有按照我想要的方式包装外，我大部分时间都在工作。由于可变宽度兄弟，我不能在它上面放置一个margin-left。我还尝试将每个项目设置为，inline-block但这会强制最后一组计算出的宽度大于可用空间，并且总是将其强制低于其他 3 组。

这是一个活生生的例子/小提琴，来源如下：

HMTL：

<div class="row level-2 note subtype-new subtype-fancy">
    <div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div>
    <div class="padded">
        <div class="status-icon-wrapper col">
          <span class="new-icon icon"></span>
          <span class="modified-icon icon" title="Revised Code"></span>
        </div>
        <div class="codes-wrapper col">
          <span class="codes"><a href="javascript:void(0)" class="code ">XYZ</a></span>
        </div>
        <div class="icon-wrapper col">
          <span class="fancy-icon icon"></span>
          <span class="plain-icon icon"></span>
          <span class="disabled-icon icon"></span>
        </div>
        <div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div>
    </div>
</div>

CSS：

.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000}
.col {float: left}
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:}
.level-1 .padded {padding-left: 30px}
.level-2 .padded {padding-left: 60px}

.codes-wrapper,
.icon-wrapper {padding-right: 3px}

.status-icon-wrapper,
.icon-wrapper {width: 17px}

.row .icon {display:none}
.note-icon {background-color: #F0F}

.fancy-icon {background-color: #CC0}
.plain-icon {background-color: #C00}
.new-icon {background-color: #0CC}

.note .note-icon,
.subtype-new .new-icon,
.subtype-modified .modified-icon,
.subtype-fancy .fancy-icon,
.subtype-plain .plain-icon,
.subtype-disabled .disabled-icon
{display: inline-block}
4

2 回答 2

4 
.description {
    overflow:hidden;
}

jsFiddled here

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow

hidden : 该值表示内容被剪裁...

于 2013-06-19T12:57:37.150 回答
0

如果我正确理解了这个问题，您应该添加：

.description{
    overflow:hidden;
}

到你的 CSS

于 2013-06-19T13:00:46.250 回答