0

最初は単純に見えたが、そうではないことが判明したことを達成したいと思います。

私のコードは次のとおりです。

<html>
<head>
<style>
div {
border-top: 1px solid black;
margin: 10px;
}
div#all {
border: 0;
}
</style>
<body>
<div id=all>
<div class=first>First</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
</div>
</body>
</html>

私が取得したいのは、「コンテンツ」クラスのすべての DIV が、左から右に次々と設定されたインライン ブロック (またはフロート) であることです。

「rowstarter」クラスは同じですが、前のフロートをクリアする必要があります (新しい行を開始します)。

「最初の」DIV の幅は、下のコンテンツと同じでなければなりません (したがって、ウィンドウの幅により、ブラウザーが 5 つの「コンテンツ」DIV を 100px 幅で 5 つ並べて表示できる場合、「最初の」DIV は 5 * 100px + 5 * になります)。 (2 * 10px [余白]) = 600px 6 つの「コンテンツ」DIV の場合、「最初」の幅は 720px です...)。

これは、JavaScript を使用せずに CSS のみで可能ですか?

4

3 に答える 3

0

おそらくあなたの質問に答えるjsFiddleをセットアップしました。幅も含まれるようになりましたが、追加されたコードには幅がないため、今必要なものを自由に使用できます

http://jsfiddle.net/agtFw/3

HTML:

<div id="all">
<div class="first">First</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>

div に 2 つ以上のクラスを指定しても問題ありません。

そしてCSS：

div {
border-top: 1px solid black;
margin: 10px;
}

div.content
{
    float:left;
}

div.rowstarter
{
    clear:left;
}

div#all {
border: 0;
}
于 2013-04-29T15:04:10.447 に答える
0

私はあなたの質問に答えると信じているフィドルを投稿しました。

まず、 を除く#all各子 div に左フロートを指定する必要があります。.first

#all,
#all div {
    float: left;
}
#all .first {
    float: none;
}

.rowstarter次に、左側をクリアします。

#all .rowstarter {
    clear:left;
}

実際には「コンテンツ」クラスはまったく必要ありません (コードが乱雑になり、ページの重量が増えるため、削除することをお勧めします)。

編集:.rowstarter div の前に div.firstを追加する場合.rowstarterは、固定幅が必要で、 の左マージンは.firstの幅とマージンの合計だけ増加する必要があり.rowstarterます。

#all .rowstarter {
    width: 100px; // arbitrary fixed width
    margin: 10px; // you've given all divs inside #all this margin, just restating for emphasis
}
#all .rowstarter + .first {
    margin-left: 130px; // width of .rowstarter, plus its left and right margins and .first's original 10px left margin
}

センタリングを実現するには、div#allその周りにラッパーを追加してから、次の css トリックを適用する必要があります。

.wrapper {
    position: absolute;
    left: 50%;
}
#all {
    position: relative;
    left: -50%;
}
于 2013-04-29T15:37:36.400 に答える