0

私は 2 つの異なる div を持っています。1 つは左に浮かび、もう 1 つは右に浮いています。これらはページ全体よりもはるかに小さい (それぞれ約 400x200) ため、ページの端に沿って 2 つが離れています。中央に並べて並べるにはどうしたらいいですか?余白をautoと20px程度にそれぞれ設定してみましたが、何も変わりませんでした..

4

5 に答える 5

2

さんのお仕事ですinline-block

http://jsfiddle.net/hyw6P/

<div id="container">
    <div id="left">Left!</div>
    <div id="right">Right!</div>
</div>​

#container{
text-align:center;
width:100%;
height:300px;
border:1px solid black
}
#left{
border:3px solid blue;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
#right{
border:3px solid red;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}​
于 2012-04-09T19:47:57.993 に答える
1

親 div に「margin: 0 auto; width:1000px;」を指定します。

<div style="margin:0 auto; width:1000px;">
     <div style="float:left">Left</div>
     <div style="float:right">Right</div>
</div>

または、それらを隣り合わせにしたい場合:

<div style="margin:0 auto;">
     <div style="float:left">Left</div>
     <div style="float:left">Right</div>
</div>
于 2012-04-09T19:47:27.270 に答える
0

z-index と絶対位置または相対位置を使用してみてください

ここにあなたを助けるためのリンクがあります

<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

http://www.yourhtmlsource.com/stylesheets/csslayout.html

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/default.asp

于 2012-04-09T19:48:34.870 に答える
0

これは、ラッパー div を使用し、子 div をインライン ブロックとして表示するように設定することで実現できます。

CSS:

#a, #b{
    border: 1px solid #999;
    width: 100px;
    display:inline-block;
}
​#container {
    text-align:center;
}​

HTML:

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
</div>

jsFiddle の例

于 2012-04-09T19:50:36.763 に答える
0

それらの両方にラッパー div を追加します。ラッパーに幅を設定し、マージンの上下を 0 に、左右を auto に設定します。次に、2 つの float div の幅をラッパーに合わせて設定します。たとえば、50% を指定すると同じ幅になります。

于 2012-04-09T19:48:25.907 に答える