如何在同一行中创建两个<div>...</div>？

问题描述：

我的意思是，这两个标签具有相同的高度。如何在同一行中创建两个<div>...</div>？

答

试试所有的divs。

display:inline-block;

+1显示：内联不够灵活，浮动杂乱！ – 2010-12-03 04:18:59

答

与CSS的float他们：

float: left

答

让他们漂浮：

HTML


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

CSS


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

你要清楚浮动..所以使用清除两个:)

答

简单：使用<span> s代替。

<div>默认情况下有display: block，这意味着下一个元素将在一个新行上。

您可以将它们更改为display: inline以获得您想要的行为。但请记住，内联<div>只是一个<span>。

答

浮动弄乱我的页面中心对齐。以下是我得到的结果，我希望在同一行上获得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>

答

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

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

那简单！

如何在同一行中创建两个...？

相关推荐

如何在同一行中创建两个
...
？