如何在同一行中創建兩個<div>...</div>？

我的意思是，這兩個標籤具有相同的高度。如何在同一行中創建兩個<div>...</div>？

2010-12-02 Keating Wang

試試所有的divs。

display:inline-block;

來源

2010-12-02 23:53:02

+1顯示：內聯不夠靈活，浮動雜亂！ – 2010-12-03 04:18:59

與CSS的float他們：

float: left

來源

2010-12-02 23:12:30 simshaun

讓他們漂浮：

HTML


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

CSS


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

你要清楚浮動..所以使用清除兩個:)

來源

2010-12-02 23:14:53

簡單：使用<span> s代替。

<div>默認情況下有display: block，這意味着下一個元素將在一個新行上。

您可以將它們更改爲display: inline以獲得您想要的行爲。但請記住，內聯<div>只是一個<span>。

來源

2010-12-02 23:18:01

浮動弄亂我的頁面中心對齊。以下是我得到的結果，我希望在同一行上獲得2和3，而不會丟失頁面居中。浮動不起作用，因爲當我調整瀏覽器的大小時，它隨着它移動。

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

來源

2014-02-10 04:35:18

使用div容器並放入所有的div。

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

那簡單！

來源

2017-11-14 17:54:49 Abraxas

如何在同一行中創建兩個<div>...</div>？

回答

相關問題