Wie mache ich zwei <div>...</div> in der gleichen Zeile?

10

Versuchen Sie dies für alle Divs.

display:inline-block;

Quelle

2010-12-02 23:53:02

+0

+1 Anzeige: Inline ist nicht flexibel genug und Schwimmer sind chaotisch! –

2

sie mit CSS Float:

float: left

Quelle

2010-12-02 23:12:30 simshaun

1

Machen sie schweben:

HTML


<div class="container1"></div> 
<div class="container2"></div> 
<div class="clear"></div>

CSS


.clear { clear: both; } 
.container1, .container2 { float: left; }

Sie haben die Schwimmer löschen .. so verwenden löschen Sie beide :)

Quelle

2010-12-02 23:14:53

9

Einfach: Verwenden Sie <span> s statt.

<div> Standardmäßig haben Sie display: block, was bedeutet, dass das nächste Element in einer neuen Zeile steht.

Sie können sie in display: inline ändern, um das gewünschte Verhalten zu erhalten. Aber denken Sie daran, dass ein Inline <div> nur ein <span> ist.

Quelle

2010-12-02 23:18:01

1

Float vermasselt meine Seitenmittenausrichtung. Hier ist, was ich habe, ich möchte 2 und 3 in der gleichen Zeile bekommen, ohne die Seitenzentrierung zu verlieren. Float funktioniert nicht, denn wenn ich die Größe des Browsers verändere, bewegt er sich mit.

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<style type="text/css"> 
.div1 { 
    background: #faa; 
    width: 500; 
} 

.div2 { 
    background: #ffc; 
    width: 400; 
    margin-right: 100px; 
} 
.div3 { 
    background: #cfc; 
    width: 100; 
    margin-left: 400px; 

} 


</style> 
</head> 

<html> 
<body> 
<center> 

<div class="div1"> This is no 1</div> 
<div class="div2"> This is no 2</div> 
<div class="div3"> This is no 3</div> 

</center> 
</body> 
</html>

Quelle

2014-02-10 04:35:18

2

Verwenden Sie einen Div-Container und legen Sie alle Ihre Divs.

.div_container{ 
    display: flex; 
    flex-direction: row; 
}

So einfach!

Quelle

2017-11-14 17:54:49 Abraxas

Wie mache ich zwei <div>...</div> in der gleichen Zeile?

Antwort

Verwandte Themen