5

通常は以下のようなページに表示される3つのdivが欲しいです

--------------
|     |      |
|  1  |      |
|     |   2  |
|-----|      |
|     |      |
|  3  |      |
|     |      |
--------------

したがって、htmlは次のようになります

編集：私はより良い解決策があると思いますが、1と3を次々に左側に保つために、最初に行うことは、それらを別のdiv内に配置することです。

そうすることは、メディアクエリだけを使用してサイズ変更を解決することは不可能だと私は信じています。

外部コンテナdivなしで同じ視覚的結果を達成する方法はありますか？

<section class="content-wrapper main-content clear-fix">
                <div>
                    <div id="1" class="main-content-left float-left">
                        @RenderSection("leftBefore", required: false)
                    </div>
                    <div id="3" class="main-content-left-after float-left">
                        @RenderSection("leftAfter", required: false)
                    </div>
                </div>
                <div id="2" class="main-content-center float-left">
                    @RenderBody()
                </div>

            </section>

私の目標は、左側のメニューを固定幅にし、右側のメニューで残りのスペースを使用することです。画面サイズを小さくした場合は、以下のように、おそらくすべてを中央に配置するために、divを移動する必要があります。

何かアドバイス？

    ---------
    |       |
    |   1   |
    |       |
    |-------|
    |       |
    |   2   |
    |       |
    |-------|
    |       |
    |   3   |
    |       |
    ---------
4

4 に答える 4

5

このようなものを使用してください...

HTML

<div class="wrap">
    <div class="right top"></div>
    <div class="left"></div>
    <div class="right bot"></div>
</div>

CSS

.wrap {width: 85%; margin: auto; overflow: hidden;}
.left {float: right; height: 510px; width: 49%; background: pink;}
.right {float: left; height: 250px; margin-bottom: 10px; width: 49%;}
.right.top {background: green;}
.right.bot {background: red;}
@media all and (max-width: 400px) {
    .left, .right {float: none; margin-bottom: 5px; height: 200px;}
}

スクリーンショット

その上600px

下600px

ここでのデモ： jsBin

于 2013-02-19T15:38:14.353 に答える
3

これは機能するはずです：

HTML：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS：

div {
    height: 200px;
    width: 100%;
}
@media screen and (min-width:500px) {
    #div1, #div3 {
        width: 50%;
        float: left;
        clear: left;
    }
    #div2 {
        width: 50%;
        float: right;
        height: 400px;
    }
}
于 2013-02-19T15:42:02.963 に答える
1

メディアクエリを使用する必要があります。

メディアクエリは、メディアタイプと、幅、高さ、色などのメディア機能を使用してスタイルシートのスコープを制限する少なくとも1つの式で構成されます。CSS3で追加されたメディアクエリを使用すると、コンテンツ自体を変更することなく、コンテンツの表示を特定の範囲の出力デバイスに合わせて調整できます。

メディアクエリの例 

@media all and (max-width: 500px) {
    /* css */
}

このメディアクエリは、画面が500pxよりも小さい場合に実行されます。

デモ： http： //jsfiddle.net/B2cKy/

于 2013-02-19T15:26:22.253 に答える
1

このコードは非常に不完全ですが、要素のレイアウト方法に関する要件を満たしています。

http://jsfiddle.net/4uxTy/（プレフィックスは含まれていません）

<section class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</section>

body, html {
    height: 100%;
}

.container {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

.a, .b {
    flex: 1 0 50%;
}

.c {
    flex: 2 0 50%;
}

@media (max-width: 20em) {
    .a, .b, .c {
        flex: 1 1 auto;
    }

    .b {
        order: 1;
    }
}

これはおそらく、マークアップを変更したり、デザインを妥協したりすることなく、必要なものに到達できるのと同じくらい近いでしょう。Flexboxは、IE10がそれをサポートする最初のIEであるという事実のために、現時点ではあまり広くサポートされていません。

http://caniuse.com/#search=flexbox

于 2013-02-19T15:57:49.967 に答える