如何制作两个 <div> ... </div> 在同一行？
[英]How to make two <div>…</div> in the same row?
问题描述
我的意思是，这两个标签具有相同的高度。
6 个解决方案
解决方案1
12 已采纳 2010-12-02 23:53:02
试试这个所有的div。
display:inline-block;
解决方案2
9 2010-12-02 23:18:01
Simple: use <span> s instead . 
简单： 使用<span> s代替 。
<div> by default have display: block , meaning the next element will be on a new line. 默认情况下， <div>有display: block ，表示下一个元素将在新行上。
You can change them to display: inline to get the behavior you want. 您可以更改它们以display: inline以获得所需的行为。 But remember that an inline <div> is just a <span> . 但请记住，内联<div>只是一个<span> 。
解决方案3
2 2010-12-02 23:12:30
用css浮动它们：
float: left
解决方案4
2 2017-11-14 17:54:49
Use a div container and put inside all your divs. 使用div容器并放入所有div。
.div_container{
display: flex;
flex-direction: row;
}
That easy! 那简单！
解决方案5
1 2014-02-10 04:35:18
Float messes up my page center alignment. Float弄乱我的页面中心对齐。 Here's what I got, I want to get 2 and 3 on the same row without losing the page centering. 这就是我得到的，我希望在同一行上获得2和3而不会丢失页面居中。 Float doesn't work because when I resize the browser,it moves with it. Float不起作用，因为当我调整浏览器大小时，它随之移动。
<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>
解决方案6
1 2010-12-02 23:14:53
Make them float: 让他们漂浮：
HTML HTML
<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>
CSS CSS
.clear { clear: both; }
.container1, .container2 { float: left; }
You have to clear the float.. so use clear both :) 你必须清除浮动..所以使用清除两个:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.