0

わかりましたので、ワードプレスのコンテンツをすべて互いに左にフロートするように設定しました。したがって、3列になります。

1 つの div のタイトルが長くなると、ボックスがあちこちに配置されます。これが私の言いたいことです（下の画像を参照）

ここに画像の説明を入力

James Brown のタイトルの方が長く、他の 2 つのボックスがかなり下がっていることに注意してください。

タイトルの長さに関係なく、それらを浮き上がらせるにはどうすればよいですか。

試してみvertical-align:top;ましたが、うまくいきません

4

2 に答える 2

2

2つの方法で入手できます。

ボックスを各行の上に揃えたい場合は、単純に .clear 要素を使用します。

h2 {
    font-weight: bold;
    clear: left;    
}
.box { 
    width: 50px;
    min-height: 50px;
    background: #ccc;
    margin: 3px;
    padding: 3px;
    float: left;
}
.clear {
    clear: both;
    height: 0px;
}
<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>

ボックスを上記のボックスに貼り付けたい場合は、列を使用します (PHP コードを少し変更する必要があります)。

h2 {
    font-weight: bold;
    clear: left;    
}
.box { 
    width: 50px;
    min-height: 50px;
    background: #ccc;
    margin: 3px;
    padding: 3px;
    float: left;
}
.column {
    width:60px;
    float: left;
}
<h2>With columns</h2>
<div class="column">
    <div class="box">1 Lorem Ipsum</div>
    <div class="box">4 Lorem Ipsum Lorem</div>
    <div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">2 Lorem Ipsum Lorem Ipsum</div>
    <div class="box">5 Lorem Ipsum</div>
    <div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">3 Lorem Ipsum</div>
    <div class="box">6 Lorem Ipsum</div>
</div>

于 2013-02-07T09:48:19.920 に答える
0

新しいnth-child()セレクターを使用すると、次のことができます。

div:nth-child(3n+1) {
  clear:left;
}

このようにして、1 番目、4 番目、7 番目など、子はボックスの左に移動し、他のすべての要素を「クリア」します。

この方法を使用する利点は、レイアウトをレスポンシブに調整できることです。たとえば、モバイルでは各行に 2 つ、大きなデスクトップでは各行に 4 つ配置できます。非セマンティック マークアップもありません。

The disadvantage is that it doesn't work in IE before version 9, but you can get around that with JavaScript. e.g. jQuery:

// polyfill for browsers that don't support nth-child() CSS selectors
$('.box:nth-child(3n+1)').style('clear', 'left');

See: http://jsfiddle.net/rVHgR/

enter image description here

于 2013-02-07T09:55:09.630 に答える