0

サイズ変更可能なコンテナー内にあるため、可変幅の行として div のコレクションがあります。div には、並べて表示したい要素の 4 つのグループが含まれています。これらの 4 つのグループのうち、2 つのグループは可変幅にする必要があり、残りの 2 つは固定です。最後のグループが希望どおりにラップされていないことを除いて、ほとんど機能しています。可変幅の兄弟のため、margin-left を配置できません。また、各項目を次のように設定しようとしましinline-blockたが、最後のグループに使用可能なスペースよりも大きい奇妙な計算幅が強制され、常に他の 3 つのグループの下に強制されました。

ここにライブの例/フィドルがあり、ソースは次のとおりです。

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

2 に答える 2

0

質問を正しく理解している場合は、次を追加する必要があります。

.description{
    overflow:hidden;
}

あなたのCSSに

于 2013-06-19T13:00:46.250 に答える