5

2 つの要素を水平方向に並べてスタックする必要がありますdiv。右側の要素は常にコンテンツに合わせてサイズを自動的に調整し (指定された最大幅まで)、左側の要素は残っているスペースを使用する必要があります。

このようなもの： ここに画像の説明を入力

これまでのところ問題ありません。div右を右にフロートさせ、左のオーバーフローを非表示に設定することで、これを行うことができました。

HTML:

<div class="frame">
    <div class="right">
        I adjust my with to my content but still need to know my boundaries if I'm floated right (max-width)
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

CSS:

.frame {
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow: hidden;
}

.left {
    overflow: hidden;

    background-color: #709670;
    border: 1px solid black;
}

.right {
    float: right;
    max-width: 200px;

    background-color: #127212;
    color: white;
    border: 1px solid black;
}

課題はdiv、ページが次のように小さな画面 (または小さなブラウザー ウィンドウなど) に表示されるときに、2 つの s を垂直に積み重ねることです。

ここに画像の説明を入力

基本的に、これは単純なメディアクエリで実行できると思いました：

@media screen and (max-width: 700px) {
    .right {
        float: none;
        max-width: none;
    }
}

これに関する唯一の問題は、右div(コンテンツに応じてサイズが変更されるもの) をマークアップ内で左のものより前に作成して、フローティングを機能させる必要があることです。その結果、「小さい」レイアウトの左の上に表示されます。

ここに画像の説明を入力

以下に実際の例を示します (「小さい」レイアウトと「大きい」レイアウトを切り替えるには、中央のリサイズを使用するだけです): JSFiddle の例

フローティングの代わりにdisplay: tableandを使用してレイアウトを達成しようとしましたが、この方法では、右の列をそのコンテンツと同じ大きさにすることができず、まだ最大幅が設定されています。table-cell

4

3 に答える 3

6

このstackoverflowの投稿で述べたように、Flexboxは、単一の最新ブラウザをサポートするだけでよいため、jQueryに頼りたくない場合に役立ちます：Mobile Safari（編集leftIEのボックスの高さが機能しないこともわかりました私のフィドルでは、理由がわかりません;そうあるべきです）。

あなたにとってそれは次のようになります： この素晴らしいフィドル！

編集divその内容に合わせて調整する権利が必要なので、代わりにこの例が必要です

CSS:

.frame {
    position:relative;
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow:hidden;
    flex-flow:row wrap;

    -webkit-justify-content: flex;
    -moz-justify-content: -moz-flex;
    justify-content: flex;

    display: -webkit-box; /* Safari */ 
    display: -moz-box; /* Firefox 21- */
    display: -ms-flexbox; /* IE 10+ */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Standard (Firefox 22+) */

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.left {    
    -ms-flex-order: 1;     
    -webkit-order: 1;
    order:1;

    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #709670;
    border: 1px solid black;
    width: auto;
}

.right {    
    -ms-flex-order: 2;
    -webkit-order: 2;
    order:2;

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #127212;
    color: white;
    border: 1px solid black;
    width: auto;

    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@media screen and (max-width: 700px) {
    .frame {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

私は自分の結果に非常に満足しています。ほぼ完全にサポートされていると思います (Mobile Safari ではサポートされていません)。

于 2013-07-01T15:50:52.897 に答える
0

純粋な CSS ソリューションは考えられませんが、jquery を使用する傾向がある場合は、次のように追加メソッドを使用できます。

$('.frame').append($('.right'));

これは、「フレーム」の子の最後にある「右」のブロックのみを移動します。

ブラウザーに応じて、画面/ウィンドウ/フレーム幅を取得するための多くのソリューションがあります。

于 2013-07-01T15:44:11.060 に答える