如何在CSS中使div彼此相邻

Question

我需要彼此相邻，但我不知道如何。

所有这些都在一个部分内。

我的代码：

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

如何让它们彼此相邻？

我得到了什么：

Answer 1

另一种方法是使用＆＃34;内联块＆＃34;：

div.secoes {
...
display: inline-block;
}

就像名字所说的那样，元素是块元素，但是内联。 如果你使用＆＃34; float＆＃34;你必须在floatet内容之后清除浮动。

Answer 2

你需要添加一个'浮动'来让你的DIVS堆叠在同一条线上。请尝试下面的更新CSS。请注意浮动中的“左”意味着DIV将首先堆叠到左侧 - 您可以尝试“正确”以查看产生的差异。

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

Answer 3

有几种方法可以做到这一点，每种方法都有其自身的缺点。

最常见的方式可能是使用float: left（或float: right）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这样做会产生令人遗憾的效果，即从文档的流程中取出所有三个div.secoes。这意味着除非您清除它们（clearfix），否则父元素div#status将没有高度。不是一个大问题（因为它可以修复），但很烦人。

另一种解决方法是将div设置为inline-block：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这有它自己的问题。主要是因为它是内联和块的组合，它继承了display: inline的烦人特征。也就是说，它保留了一些空白量度。摆脱（getting rid of inline-block whitespace）相当简单，但是，再一次，它很烦人。 （我使用了链接中描述的方法之一 - 将开始标记放在与之前元素相同的行上。）

最后一种方法（还有其他方法，但我只能超过三种方法）是使用display: flex：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您不需要特别健壮的browser support，这是目前最好的方法。如果你不需要支持IE9并且不介意前缀，那么这是迄今为止最简单的方式来获得你想要的东西。它甚至使浮动内部div没有效果（所以如果你想使用方法一和三，你可以支持新旧浏览器）。默认情况下，它只是将它们排列在一起，但是如果你愿意，可以让它们完全填充它们的父项（简单地将flex: 1放在子项中）。使用此方法，您甚至可以删除div.secoes上的宽度。这是迄今为止我最喜欢的方法。

有三种方法可以很好地运作。虽然它们之间都有缺点，但您可以找到适用于任何事物的解决方案。