0

float div トピックで何百ものトピックが開かれていることは知っていますが、そこで私の問題に対する答えが見つかりませんでした。何らかの理由で何もうまくいきませんでした。親 div があり、その上に 2 つの静的 div を 1 つ右に配置し、もう 1 つを左に配置し、もう 1 つの div にはそれらの間に浮かぶ主な情報を含みます。つまり、それらの間の等距離です。しかし、何らかの理由でそれは私にとってはうまくいきません。私が行うすべての変更は、右のdivを下に蹴るか、メインのdivを右/左に固定します。ここに私のコードがあります:

<html>
<head>
<link rel = "stylesheet" href = "tryout.css">
</head>
<body>
    <div id="super_wrap">
    <div class="ADDVERTISEMENT"><img src="add.jpg" /></div>
    <div id="wrap">
    some data
    </div>
    <div class="ADDVERTISEMENT2"><img src="add.jpg" /></div>
    </div>

</body>
</html>

そしてCSS：

.ADDVERTISEMENT{
margin-top:10px;
float:left;
margin-left:0 auto;
margin-right:0 auto;
}
.ADDVERTISEMENT2{
margin-top:10px;
float:right;
margin-left:0 auto;
margin-right:0 auto;
}
#wrap {
display: inline-block;
width:960px;
padding:10px;
background:red;
margin-left:0 auto;
margin-right:0 auto;
}
#super_wrap{
width:100%;
display: inline-block;
}
4

2 に答える 2

1

置く

text-align:center

で、 の後に 3 番目に#super_wrap移動します。次に、要素は中央に配置する必要があります。#wrap#ADDVERTISEMENT2#wrap

注: #wrap3 つすべてに十分なスペースがない場合でも、次の行にドロップする必要があります。#super_wrap

これが機能するフィドルです：http://jsfiddle.net/qN4Tp/

于 2013-07-26T15:51:20.573 に答える
1

css 宣言がいくつか間違っているため、問題が発生します。

margin-left:0 auto;
margin-right:0 auto;

速記の適用は for のみで機能しますが、for では機能しmargin:ませんmargin-right:

するかmargin:0 auto;、

margin-left:auto;
margin-right:auto;

中央の div を中央に表示したい場合は、次のように html を並べ替えてみてください。

Ad1 Ad2 ラップ

デモを見る: http://jsbin.com/oqujet/1/edit

于 2013-07-26T15:56:31.677 に答える