如何在CSS中使div彼此相邻
马修斯·西里洛（Matheus Cirillo）
我需要使一个div彼此相邻，但是我不知道该怎么做。
所有这些都在一个节内。
我的代码：
HTML：
<section id="corpo">
<h1><center>Informatize seu negócio!</h1>
<div id="status">
<div class="secoes">
<h1>Seu negócio</h1>
<h2>Informatizado</h2>
</div>
<div class="secoes">
<h1>Encomende um</h1>
<h2>Sistema</h2>
</div>
<div class="secoes">
<h1>Treinamos sua</h1>
<h2>Equipe</h2>
</div>
</div>
</section>
CSS：
div.secoes{
width: 422.906px;
height: 92px;
text-align: center;
overflow:hidden;
*zoom:1;
margin:0 0 5.8rem;
display:block;
}
section#corpo div#status{
width: 1270px;
height: 225px;
}
如何使它们彼此相邻？
我得到的是： 
大卫·曼
您可以通过几种方法来完成此操作，每种方法都有其自身的缺点。
可能最常见的方式是使用float: left（或float: right）：
div.secoes{
width: 422.906px;
height: 92px;
text-align: center;
overflow:hidden;
*zoom:1;
margin:0 0 5.8rem;
display:block;
float: left;
}
section#corpo div#status{
width: 1270px;
height: 225px;
}<section id="corpo">
<h1><center>Informatize seu negócio!</h1>
<div id="status">
<div class="secoes">
<h1>Seu negócio</h1>
<h2>Informatizado</h2>
</div>
<div class="secoes">
<h1>Encomende um</h1>
<h2>Sistema</h2>
</div>
<div class="secoes">
<h1>Treinamos sua</h1>
<h2>Equipe</h2>
</div>
</div>
</section>不幸的是，这将所有三个div.secoes文档从文档流中删除。这意味着除非您清除它们（clearfix），否则父元素div#status不会有高度。这不是一个大问题（因为可以解决），但是很烦人。
Another way to fix it would be to set the div's to inline-block:
div.secoes{
width: 422.906px;
height: 92px;
text-align: center;
overflow:hidden;
*zoom:1;
margin:0 0 5.8rem;
display:inline-block;
}
section#corpo div#status{
width: 1270px;
height: 225px;
}<section id="corpo">
<h1><center>Informatize seu negócio!</h1>
<div id="status"><div class="secoes">
<h1>Seu negócio</h1>
<h2>Informatizado</h2>
</div><div class="secoes">
<h1>Encomende um</h1>
<h2>Sistema</h2>
</div><div class="secoes">
<h1>Treinamos sua</h1>
<h2>Equipe</h2>
</div>
</div>
</section>This has it's own issues. Mainly that since it is a combination of inline and block it inherits an annoying trait from display: inline. That is, it preserves some measure of whitespace. It's fairly simple to be rid of (getting rid of inline-block whitespace), but, once again, it's annoying. (I used one of the methods described in the link - putting the opening tag on the same line as the element before.)
The final method (there are others, but I'm only going over three) is to use display: flex:
div.secoes{
width: 422.906px;
height: 92px;
text-align: center;
overflow:hidden;
*zoom:1;
margin:0 0 5.8rem;
display:block;
}
section#corpo div#status{
width: 1270px;
height: 225px;
}
div#status {
display: flex;
}<section id="corpo">
<h1><center>Informatize seu negócio!</h1>
<div id="status">
<div class="secoes">
<h1>Seu negócio</h1>
<h2>Informatizado</h2>
</div>
<div class="secoes">
<h1>Encomende um</h1>
<h2>Sistema</h2>
</div>
<div class="secoes">
<h1>Treinamos sua</h1>
<h2>Equipe</h2>
</div>
</div>
</section>如果您不需要特别强大的浏览器支持，那么这是迄今为止最好的方法。如果您不需要支持IE9并且不介意前缀，那么这是到目前为止获得所需内容的最简单方法。它甚至使内部div浮动都没有效果（因此，如果您想同时使用方法一和方法三，则可以支持新的和旧的浏览器）。默认情况下，它只是将它们彼此相邻排列，但是如果您愿意，可以让它们完全填充其父对象（只需放入flex: 1子对象中）。使用此方法，您甚至可以删除的宽度div.secoes。到目前为止，这是我最喜欢的方法。
有三种方法效果很好。尽管它们之间都有缺点，但您几乎可以找到所有解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在CSS中正确地将div彼此相邻放置？
- 2
如何在HTML中将3个div彼此相邻放置
- 3
如何在CSS网格中使图像彼此相邻放置，并在缺少空间时跳转到另一行
- 4
如何在CSS中使图像彼此对齐？
- 5
CSS float div从左到右彼此相邻
- 6
css使div在栏中彼此相邻显示
- 7
如何对齐多个div彼此相邻？
- 8
如何使div彼此相邻，上下浮动
- 9
如何修复彼此不相邻的div
- 10
如何使用CSS在Ionic离子段按钮中使图标和文本彼此相邻？
- 11
如何在材料UI中的文本字段中使两个输入装饰彼此相邻
- 12
2 div彼此相邻
- 13
多个DIV彼此相邻
- 14
胶水div彼此相邻
- 15
如何在div中彼此相邻显示JavaScript列表中的所有项目？
- 16
如何在没有浮动的情况下将div彼此相邻放置？
- 17
使用CSS使彼此相邻的div占用所有垂直空间
- 18
如何使按钮彼此相邻？
- 19
如何将两个div彼此相邻放置？
- 20
如何将DIV元素与图像彼此相邻放置
- 21
div彼此相邻放置，而不管父级宽度如何
- 22
如何将div框与彼此相邻的文本对齐
- 23
如何在SQL中彼此相邻堆叠一列？
- 24
如何在 OS X 中将各种图像彼此相邻连接？
- 25
彼此相邻的圈DIV元素
- 26
Bootstrap div彼此不相邻
- 27
使textarea在div中彼此相邻
- 28
如何在CSS中将元素彼此相邻放置而不使用float。即侧边栏旁边的主要内容
- 29
如何在div框内彼此堆叠div？
我来说两句