0

Dreamweaver で可変グリッド レイアウトを使用しており、同じ行に 3 つの div があります。3 つの div すべてをページの中央に配置したいことを除けば、見栄えは良さそうです。現在、それらはすべて左にシフトされています。明らかにそうするように言われているからです。中央に配置するように指示する方法がわかりません。

助けていただければ幸いです。

現時点ではこのように見えます（私のイメージではありません）：

#item1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
}
#item2 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
}
#item3 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;

#featuredholder {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

編集：

この写真を見て、私が何を扱っているかを正確に確認してください。ここに画像の説明を入力

これらの div を中央に配置する必要がありますが、それでも流動的です。

4

2 に答える 2

1

私があなたを正しく理解しているなら、あなたはmargin: 0 auto;あなたのラッパーに追加する必要があります。

#wrapper
{
    width: 80%;
    margin: 0 auto;
    padding: 10px;
}

#item1 {
    float: left;
    width: 32.6007%;
}
#item2 {
    float: left;
    width: 32.6007%;
}
#item3 {
    float: left;
    width: 32.6007%;
}

span.clear /*clearfix*/
{
    display: block;
    clear: both;
}

display: block;また、デフォルトではブロックレベルの要素であるため、divで宣言する必要はありません。divのクリアも削除します。そうしないと、フロートが壊れます（これはspan.clear、3つのdivの後の目的です）。

デモ： http： //jsfiddle.net/Kyle_Sevenoaks/ZSYnW/

コメントの後に、中央の要素をラップするために追加のdivを追加し、そのdivのマージンをに設定し0 auto、HTMLの残りの部分を再構築して、2つの各ブロックが別のラッパーdiv内に収まるようにする必要があります:)

http://jsfiddle.net/Kyle_Sevenoaks/ZSYnW/1/

于 2012-08-20T07:25:51.503 に答える
1

ちょっと今このcssにこのように慣れています

#wrapper{
margin:0 auto;
width:800px;
overflow:hidden;
}

#item1, #item2 , #item3 {
float:left;
width:30%;
 }
#item1{
margin-left:3%;
}
于 2012-08-20T07:19:07.773 に答える