nebeneinander float css

-1

Ich versuche, zwei Bilder nebeneinander zu zentrieren, aber aus irgendeinem Grund zeigt es immer die Bilder auf der linken Seite. Weiß jemand, wie ich sie zentriert und nebeneinander bekommen könnte?nebeneinander float css

Danke!

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, 
 
#box2 { 
 
    border: 1px solid white; 
 
    float: left; 
 
    min-height: 200px; 
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 250px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 250px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
    <div id="box1"> 
 
    <h1>header1</h1> 
 
    <p>aaa</p> 
 
    </div> 
 

 
    <div id="box2"> 
 
    <h1>header2</h1> 
 
    <p>bbb</p> 
 
    </div> 
 

 
</div>

Quelle

2017-09-24 max

@jack denke, ich OP Sorge ist sie horizontal zentriert ausrichten, in diesem Fall Du hast vielleicht recht. Es wird in der Frage nicht erwähnt. – bhansa

entfernen float: left und verwenden display: inline-block

#box1, #box2 { 
    border: 1px solid white; 
    display: inline-block; 
    min-height: 200px; 
    color: white; 
}

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 

 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, #box2 { 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
    min-height: 200px; 
 
    
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 200px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 200px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
<div id="box1"> 
 
<h1>header1</h1> 
 
<p>aaa</p> 
 
</div> 
 

 
<div id="box2"> 
 
<h1>header2</h1> 
 
<p>bbb</p> 
 
</div> 
 

 
</div>

Fiddle

Quelle

2017-09-24 20:24:16 jack

AKTUALISIERT -Sie können ein Gitter verwenden.

#container { 
     width: 100%; 
     border: 1px solid #665544; 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     text-align: center; 
    } 

    .box { 
     width: 250px; 
     border: 1px solid white; 
     display: block; 
     min-height: 200px; 
     color: white; 
     margin-right: auto; 
     margin-left: auto; 
    } 

    #box1 { 
     background-color: #111; 
    } 

    #box2 { 
     background-color: #777; 
    }

Quelle

2017-09-24 20:31:40

Testen Sie Ihren Code. Es löst das Problem nicht. – jack

@jack Code Aktualisiert –

OP muss beide divs in der gleichen Zeile nebeneinander ausrichten. – jack

-1

Schwimmer entfernen: links; von # box1, # box2 und Anzeige hinzufügen: Inline-Block; ps: es ist besser, wenn Sie .box statt # box1 verwenden, # box2

oder verwenden twitter Bootstrap (Grid System)

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style type="text/css"> 
     #container { 
      width: auto; 
      margin: 0 auto; 
      border: 1px solid #665544; 
      text-align: center; 
     } 

     .box { 
      width: 250px; 
      border: 1px solid white; 
      display: inline-block; 
      min-height: 200px; 
      color: white; 
     } 

     #box1 { 
      background-color: #111; 
     } 

     #box2 { 
      background-color: #777; 
     } 
    </style> 
</head> 
<body> 

    <div id="container"> 

    <div id="box1" class="box"> 
    <h1>header1</h1> 
    <p>aaa</p> 
    </div> 

    <div id="box2" class="box"> 
    <h1>header2</h1> 
    <p>bbb</p> 
    </div> 

    </div> 

</body> 
</html>

Quelle

2017-09-24 20:36:54

Ihre Lösung wurde bereits veröffentlicht. – jack

nebeneinander float css

Antwort

Verwandte Themen