1

3 つの div を均等に (または、より一般的に言えば) 浮動させたいと考えています。私はレスポンシブテーマを構築しています（ちょっと）、利用可能な幅に基づいて特定のアイテムを調整したいです。

はい、ランダムな画面測定から始めて、「ブレークポイント」の計算を行うことができます（私が通常行うことです）が、非常に多くのデバイスを使用して、本当にスマートな方法で何かを真に柔軟にできるかどうかを確認しようとしています。より自動化されたものになります。saymargin 0px auto; などとのアライメントさえ行うときのように...

たとえば。幅 1000px の親 div がありdiv1、div2, div3,div4が、幅が広く、「均等な」間隔でフロートしたい場合240px、id はおそらくこのようにします。 

div1{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div2{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div3{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div4{ float:right; max-width:XXX; min-width:XXX; }

これにより、多かれ少なかれ均等な間隔が得られます。別の画面に合わせたい場合は、メディアクエリを実行して、何とか何とかしてください

次に、均等に見える適切なブレークポイントを作成するために、数学から始める必要があります。

フロートされたdiv間の間隔が、特定の数値に入る必要なく、画面の幅に関係なく残るようにする方法はありますか?? 再び例として、margin 0px auto;たとえば???

以前にも質問されたかもしれませんが、もしそうでしたら申し訳ありません。

ありがとうございます。

4

2 に答える 2

1

マークアップがこれに似ている場合...

<div class="parent">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>c</div>
</div>

Flexboxはこれを非常に簡単に行うことができ、より狭いデバイスにメディアクエリを使用する必要はありません。空き領域を再配分するだけです。

http://jsfiddle.net/END8C/（すべてのプレフィックスが含まれています）

.parent {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: -5px; /* optional */
  overflow: hidden; /* optional */
}

.parent div {
  -webkit-flex: 0 0 240px;
  -ms-flex: 0 0 240px;
  flex: 0 0 240px;
  margin: 5px;
}

フレックスボックスをサポートしていないブラウザのフォールバックとして、子要素でフロートを自由に使用できます（http://caniuse.com/#search=flexboxを参照）。Firefoxはラッピングをサポートしていないため、接頭辞のないバージョンには@supportsブロックを使用する必要があることに注意してください（http://www.sitepoint.com/supports-native-css-feature-を参照）。検出/）。

正当化を使用すると、同様の効果を得ることができます。

http://jsfiddle.net/END8C/1/

.parent {
    text-align: justify;
    margin: -5px; /* optional */
}

.parent:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

.parent div {
    display: inline-block;
    margin: 5px;
    width: 240px;
}

最後の子要素の後にある空白をコメント化または削除する必要があります。そうしないと、子が折り返されているときに空白が正しく整列しません。

于 2013-02-23T14:08:48.543 に答える