7

クライアントの解像度に応じてラップする CSS で柔軟なレイアウトを作成しようとしています。

たとえば、横向き (幅 1024px) の iPad では、次のように表示したいと考えています。

ここに画像の説明を入力

しかし、縦向き (幅 600px) のプレイブックでは、次のように表示したいと思います。

ここに画像の説明を入力

20px の余白を除いて、ほとんどすべてが機能しています。ラップされた要素のマージンを指定する方法がわかりません。

これが私のコードです：

HTML:

<div class="box-row-fluid">
     <div class="col">Box 1</div>
     <div class="col">Box 2</div>
</div>

CSS:

.box-row-fluid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
}

.box-row-fluid > .col {
    -webkit-flex: 1 400px;
    background: #fff;
}

コードは、ブラウザーが有効な Webkit ブラウザーであることを前提としています。

助けていただければ幸いです。お時間をいただきありがとうございます。

4

2 に答える 2

2

あなたは確かにこのようにそれを行うことができますMy Fiddlebackground color (マージンの可視性のために編集)

CSS

.col:nth-child(1) {
   margin-bottom: 20px;
}

div水平方向に 2 の間にマージンを追加するには、特定の解像度に@media クエリmargin-right: 20px;を使用し、他の解像度に追加できます

説明:両方:nth-child(1)に使用しているため使用してくださいclass="col"<div>

于 2012-10-15T16:20:32.280 に答える
-1

Twitterのブートストラップを含めてみませんか?

これでうまくいくでしょう。

<div class="row-fluid">
    <div class="span6">
        Content box 1
    </div>
    <div class="span6">
        Content box 1
    </div>
</div>

含める必要があるのは、非常に小さくてうまく機能する「グリッドシステム」だけです!

于 2012-10-15T16:20:36.170 に答える