9

私は次のhtmlを持っています：

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        ...
        <div class="floating">wookie5</div>
    </div>
</div>

それは画像ギャラリーのようなものだと考えてください。

main_containerのサイズは固定されておらず、ユーザー解像度のパーセンテージとして設定されます。sub_containerに、浮動divの合計の正確な幅を持たせたい。

「display：table;」を使用する場合 sub_containerおよび"display：inline-block;"の場合 フローティングdivの場合、正常に機能します。

ここに画像の説明を入力してください

リストに十分なdivが含まれるまで、幅の合計がmain_containerより大きくなり、次の行で壊れます。

ここに画像の説明を入力してください

しかし、それでも、サブコンテナ（黄色の背景）は、次のように複数の行に移動する場合でも、常にdivの合計の正確な幅になるようにします。

ここに画像の説明を入力してください

私は何時間もグーグルで検索しましたが、エレガントな解決策を見つけることができませんでした（可能であればcssのみ）。

これがjsfiddleで、これで遊んでいます。

4

5 に答える 5

5

純粋なCSSソリューション

問題は、アイテムが次の行に折り返されることを「知っている」ために、コンテナが使用可能な水平方向のスペース、つまり.main_container幅を「埋める」必要があることです。ただし、背景が実際の要素自体に必要なものを超えないようにする必要があります。そこで、要素自体を使用して、石畳の疑似要素を使用して背景を作成しました。

これがフィドルです（IE9、Firefox 18、Win7マシンのChrome24でテスト済み）

私が行っているのは、背景を個々の.floating要素とつなぎ合わせることです。これにより、右端の要素が背景のサイズの適切な境界線コントロールになります（フィドルの2つの異なる幅の例に注意してください）。

各部分の説明は、以下のコメントに記載されています。注意すべき2つの重要な制限があります。

  1. はセット.floatingを持つことができないpositionため、特定のアプリケーションに基づく潜在的な制限です。
  2. background単色または純粋に垂直方向の「モーション」のいずれかである必要があります（つまり、上から下へのグラデーションフェード、または水平線が機能します）。

KEY CSS（説明コメント付き）

.sub_container {
    border-left: 1px solid #333; /* forms its own left border */
    overflow: hidden; /* needed for background and border to work */ 
    position: relative; /* positioning background off this */
    z-index: 1; /* needs a stacking context */
}

.floating {
    font-size:20px;
    line-height:30px;
    padding:0 5px 0 5px;
    border: 1px solid black;
    margin: 3px;
    display: inline-block;
    /* NOTE: CANNOT be given positioning  */
}

.floating:after {
    content: '';
    position: absolute; /* will position off subcontainer */
    border-top: 1px solid black; /* makes the top/bottom border itself */
    border-bottom: 1px solid black;
    z-index: -1; /* push it to the background */
    top: 0; /* set it to top of sub_subcontainer */
    bottom: 0; /* set it to bottom of sub_container */
    margin-left: -100%; /* shove it past the far left edge of sub_container */
    /* next, use padding to bring it back to its position at the end
       of the text string of .floating */
    padding-left: 100%;
    /* next, add enough padding on the right to compensate for the right
       padding, right margin, and right border of .floating */
    padding-right: 9px; 
    background-color: yellow; /* set your background color */
    /* NOTE: this will not work with a background image that
       has any horizonal differences to it (top to bottom 
       gradient would probably be okay) */
}

.floating:before { /* make right border */
    content: '';
    padding-top: 10000px; /* give it some obscene height that will not be exceeded */
    margin: -5000px 0; /* counter the padding height by half size margins top/bottom */
     /* next, push this behind the background with an even lower z-index
        to hide it if it is not the right most element beign used to 
        form the right border */
    z-index: -2;
    border-right: 1px solid black; /* make the right border */
    float: right; /* get the before element to the right */
    position: relative; /* needs to be adjusted in position */
    right: -9px; /* move it same as padding-right of the after element */
    display: block; /* give it a display */
}
于 2013-02-21T18:08:30.137 に答える
2

私はこれを試すのに飽きて、それを解決するためにjQueryに基づいてJSスクリプトを作成しました。

var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());

デモ

于 2013-02-18T01:21:26.977 に答える
2

あなたの質問を読み直してください...あなたは何もコミットしないので（最大幅：80％、500pxなど）私は4番目の子供ですべてを壊しました-あなたの例によると。

CSS

.main_container, .sub_container, .floating { outline:1px solid black }
.sub_container { background-color:yellow; display:table; padding-left:5px }
.floating {
    float:left;
    padding:5px;
    margin:5px 5px 5px 0;
}
.floating:nth-child(4n+5) {
    clear:left;
    float:left;
}

HTML

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
        <div class="floating">wookie6</div>
        <div class="floating">wookie7</div>
        <div class="floating">wookie8</div>
        <div class="floating">wookie9</div>
    </div>
</div>

ここに画像の説明を入力してください

編集（オプション2）
あなたがやろうとしていることはHTML/CSSだけで達成できるとは思いません。私は予感に基づいた別の解決策を提供します...そしてあなたの画像ギャラリーのコメント。

CSS

.main_container, .sub_container, .floating { outline:1px solid black }
.main_container {
    text-align:center
}
.sub_container { background-color:yellow; display:inline-block; max-width:80%; }
.floating {
    display:inline-block;
    padding:5px;
    margin:5px;
}

HTML

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1wookie1wookie1</div>
        <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
        <div class="floating">wookie6wookie6</div>
        <div class="floating">wookie7wookie7wookie7</div>
        <div class="floating">wookie8</div>
        <div class="floating">wookie9</div>
    </div>
</div>

.subcontainerをコンテンツにスナップさせることはありません。ただし、（を使用してmax-width）メインコンテナからある程度の余裕を持たせることができ、その子はさまざまなサイズにすることができます。

ここに画像の説明を入力してください

于 2013-02-20T20:43:26.790 に答える
0

「sub_container」にはdivの代わりにspan要素を使用します

.sub_container{background-color:yellow;}
于 2013-02-21T10:33:17.627 に答える
0

メインコンテナの幅と.sub_containerの位置を絶対的に削除すると、準備が整います。

.main_container {
    #width:380px;
}

.sub_container {
    #position: absolute;
}
于 2013-02-18T00:31:37.990 に答える