webentwicklung-frage-antwort-db.com.de

Zwei Divs in derselben Reihe und Mitte richten beide aus

Ich habe zwei Divs wie diese

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

Ich möchte, dass sie in derselben Zeile angezeigt werden, also habe ich float:left.

Ich möchte, dass beide auch in der Mitte der Seite sind, also habe ich versucht, sie mit einem anderen div wie diesem zu verpacken

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

Aber es geht nicht. Wenn ich den Code in diesen ändere

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

dann geht es in die Mitte, aber die horizontale Bildlaufleiste ist da und es scheint, als wäre sie nicht wirklich zentriert.

Können Sie mir bitte vorschlagen, wie ich dies erreichen kann? Vielen Dank.

Bearbeiten: Ich möchte, dass das innere Div (Div 1 und Div 2) auch mittig ausgerichtet wird.

25
knightrider

Du könntest das tun

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>  

http://jsfiddle.net/jasongennaro/MZrym/

  1. wickle es in ein div mit text-align:center;
  2. gib den innder divs ein display:inline-block; anstelle eines float

Am besten ist es auch, das CSS in ein Stylesheet zu schreiben.

56
Jason Gennaro

Könnte das für Sie tun? Überprüfe mein JSFiddle

Und der Code:

[~ # ~] html [~ # ~]

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

[~ # ~] CSS [~ # ~]

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}
10
Jules

beide schwimmenden divs müssen eine breite haben!

stellen Sie 50% der Breite auf beide ein und es funktioniert.

BTW, der äußere div, mit seinem margin: 0 auto wird sich nur zentrieren, nicht die darin befindlichen.

2
jackJoe

Ich würde gegen display: inline-block Stimmen, da es nicht browserübergreifend unterstützt wird, IE <8).

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

EDIT: Wenn kein Abstand zwischen den Zellen gewünscht wird, ändern Sie einfach sowohl .left Als auch .right, Um float: left; Zu verwenden.

1
brezanac

Mit display: inline-block Und text-align: center Zur Mitte ausrichten.

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Mit display: flex Und justify-content: center Zur Mitte ausrichten

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Mit display: flex, justify-content: center Und align-items:center Vertikal und horizontal zur Mitte ausrichten.

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>
1
Vignesh Raja

Besser so bis jetzt:

  1. Wenn Sie display angeben: inline-block; Für innere Divs werden untergeordnete Elemente von inneren Divs ebenfalls diese Eigenschaft erhalten und die Ausrichtung der inneren Divs stören.

  2. Besser ist es, zwei verschiedene Klassen für innere Divs mit width, margin und float zu verwenden.

Bester Weg bis jetzt:

Flexbox verwenden.

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Gohar ul Islam

Bitte werfen Sie einen Blick auf flex es wird Ihnen helfen, die Dinge richtig zu machen,

auf dem Haupt Div Set CSS display :flex

der div ist der in set css: flex:1 1 auto;

angehängter jsfiddle link als beispiel viel spaß :)

https://jsfiddle.net/hodca/v1uLsxbg/

0
hod caspi