1

タイル ベースのポートフォリオの Wordpress テーマを作成していますが、タイルを親 div の中央に正しく配置できません。これが静的ページです(.cu.cc からできるだけ早く移行しています)。私はinline-blockそれらをすべて1行に揃えていましたがmargin、タイル間のギャップを維持するためのスタイルがありますが、私が得ているのはこれです(赤い線が追加されました):

整列不良

タイルを赤い線に揃えたいのですが、どうすればいいですか?

HTML の要約版を次に示します。

<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>

そしてCSS：

.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}

ありがとう、オリバー

4

2 に答える 2

2

IE8ではサポートされていないことに注意してKarl-Andréの回答に追加する:last-childので、に切り替えるといいでしょう

.content-wrapper .tile {
   margin-left: 10px;
}
.content-wrapper .tile:first-child {
   margin-left: 0px;
}

さらに賢明な決定は、次を使用することです。

.content-wrapper .tile + .tile {
   margin-left: 10px;
}

6 行ではなくわずか 3 行で、エレガントでどこでも機能します。

また、マージンを手動で入力することに飽きて、 - のjustifyような動作が 必要な場合は、等間隔の DIV を持つ Fluid width を検討してください。

于 2013-05-19T21:45:01.537 に答える
1

これを追加してみてください：

.tile:last-child{
    margin-right : 0;
}

div は中央に配置されていますが、最後の div マージンが要素を台無しにしています

于 2013-05-19T21:24:48.013 に答える