html - 文本未在自身下方环绕

Question

我有一组 div 作为行，它们可以是可变宽度的，因为它们位于可调整大小的容器内。 div 包含 4 组我想要并排显示的元素。在这 4 组中，其中 2 组的宽度需要可变，而另外 2 组的宽度是固定的。除了最后一组没有按照我想要的方式包装外，我大部分时间都在使用它。由于 sibling 的宽度可变，我无法在其上留边距。我还尝试将每个元素设置为 inline-block，但这迫使最后一组具有一个奇怪的计算宽度，该宽度大于可用空间，并且总是迫使它低于其他 3 组。

Here's a live example/fiddle 来源如下:

HTML:

<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}

Answer 1

.description {
    overflow:hidden;
}

jsFiddled here

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

隐藏:此值表示内容被剪裁 ...