CSS Float "Hug Center"?

Question

Ich habe zwei verschiedene divs, eine, die nach links schwebt und eine, die nach rechts schwebt. Sie sind viel kleiner als die ganze Seite (jeweils etwa 400x200) und so sind die beiden weit voneinander entfernt, die Ränder der Seite umarmend. Wie kann ich sie in der Mitte nebeneinander bekommen? Ich habe versucht, die Ränder auf Auto und ca. 20px jeweils, aber es hat nichts geändert ..

Answer 1

Geben Sie ihnen ein Elternteil div mit "margin: 0 auto; breite: 1000px;"

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

Oder, wenn man sie direkt nebeneinander wollen:

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

Answer 2

Dies ist ein Job für 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; 
}​ 

Answer 3

einen Wrapper div um sie herum Both. Legen Sie eine Breite auf dem Wrapper fest und setzen Sie den Rand oben und unten auf 0 und links und rechts auf automatisch. Dann setze die Breite der zwei Float-Divs so, dass sie an die Hülle passen, z. 50% werden ihnen die gleiche Breite geben.

Answer 4

Versuchen eine z-Index und die Position unter Verwendung von Absolues oder relativen

Heresa Link ya zu helfen

<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

Answer 5

Sie können dies mit einem Wrapper div erreichen und die untergeordneten divs so einstellen, dass sie als Inline-Blöcke angezeigt werden.

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 example.