【问题标题】：Align <div> elements side by side并排对齐 <div> 元素
【发布时间】：2011-06-23 17:57:39
【问题描述】：

我知道这是一个相当简单的问题，但我终其一生都无法弄清楚。我有两个已应用背景图像的链接。这是它目前的样子（为阴影道歉，只是一个按钮的粗略草图）：

但是，我希望这两个按钮并排放置。我真的无法弄清楚对齐需要做什么。

这是 HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

这是 CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

【问题讨论】：

光看标题首先想到的是float:left;
@JCOC611：将float:left; 应用到divs 上做得很好。您可以发表您的评论作为答案吗？谢谢！
第二个是display: inline-block;，但它的支持不太好......
float:left inside a container 可以工作，但我会尝试使用两个标签而不是
s 作为按钮。
如前所述，添加 float: left;到 #buyButton 和 #galleryButton，然后添加另一个元素 clear: both;清除浮动。为什么使用 div（块元素）来包装？

标签： css html alignment

【解决方案1】：

当心`float: left`…?

…有很多方法可以并排对齐元素。

以下是实现两个元素并排的最常用方法……

演示：View/edit all the below examples on Codepen

以下所有示例的基本样式...

这些示例中parent 和child 元素的一些基本css 样式：

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

使用float 解决方案会对其他元素产生意想不到的影响。（提示：您可能需要使用clearfix。）

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

注意：这两个子元素之间的空格可以去掉，方法是去掉div标签之间的空格：

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}

【讨论】：

是的，但我听说使用inline-block 有一些兼容性问题。另外，使用它比 float 有什么优势吗？
是的，inline-block 较新，因此您的目标浏览器可能还不支持它（尽管有许多特定于浏览器的属性和解决方法）。优点是包含元素会包裹元素；使用float，您必须将 css 添加到父元素。
注意：使用inline-block可能会导致某些元素错位。我通过确保每个元素具有相同数量的文本行来解决此问题。
我喜欢你举例子的方式。

【解决方案2】：

将float:left; 应用于您的两个 div 应该使它们并排放置。

【讨论】：

我是不是弄错了，还是clear:both; 需要进入某个地方？我从来都不是 CSS 专家，但当我看到浮动也看到清除时，我似乎很典型。
clear:both 将完全相反。 “浮动元素之后的元素将围绕它流动。为避免这种情况，请使用 clear 属性。”
@JCOC611：啊，当你想要一个短暂的浮动能力时，通常会这么清晰？说得通。谢谢你的课。 ;-)
只是为了“清楚”（我知道这很糟糕），如果您想要在对齐的两个 div 下方有第三个 div，则需要使用 <br style="clear: both;" />。
@Tass 你只需要像这样的第三个 div：<div style="clear: both;">...</div>（不需要 br）

【解决方案3】：

保持简单

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>

【讨论】：

【解决方案4】：

.section {
  display: flex;
}

.element-left {
  width: 94%;
}

.element-right {
  flex-grow: 1;
}

<div class="section">
  <div id="dB" class="element-left" }>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a>
  </div>
  <div id="gB" class="element-right">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>
  </div>
</div>

或

.section {
  display: flex;
  flex-wrap: wrap;
}

.element-left {
  flex: 2;
}

.element-right {
  width: 100px;
}

<div class="section">
  <div id="dB" class="element-left" }>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a>
  </div>
  <div id="gB" class="element-right">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>
  </div>
</div>

【讨论】：

当心float: left…?

…有很多方法可以并排对齐元素。

演示：View/edit all the below examples on Codepen

以下所有示例的基本样式...

当心`float: left`…?