将<div>元素并排对齐

Question

我知道这是一个相当简单的问题，但我想不明白该怎么做。我有两个链接，我已经应用了背景图像。以下是当前的外观（抱歉，只是一个按钮的粗略草图）:

然而，我希望这两个按钮并排放置。我真的无法确定需要调整什么对齐方式。

以下是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;
}

- sudo rm -rf

---

只看标题就想到的第一个是 float:left;。 - JCOC611

将 float:left; 应用于两个 div 中，可以完美地解决问题。您能否将您的评论发布为答案？谢谢！ - sudo rm -rf

第二个是 display: inline-block; 但它的支持程度较差... - J V

在容器内使用float:left会起作用，但我建议使用两个<span>标签而不是<div>标签来制作按钮。 - shiftycow

如前所述，将float: left;添加到#buyButton和#galleryButton，然后添加另一个带有clear: both;的元素以清除浮动。为什么要使用div（块元素）来包装<a>？ - ludesign

@ludeesign：我不知道为什么要把它们包起来。最初我没有这样做，但是由于这个问题，我无缘无故地把它们包起来了。去掉这些 div 对 float:left; 没有任何影响，所以感谢你的建议。 - sudo rm -rf

Answer 1

小心 float: left…

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

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

演示：在 Codepen 上查看/编辑下面的所有示例

---

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

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

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

---

使用浮动布局的解决方案可能会对其他元素产生意外影响。(提示：您可能需要使用clearfix。)

html

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

层叠样式表

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

---

- Beau Smith

---

是的，但我听说使用inline-block会有一些兼容性问题。此外，与使用float相比，有什么优势吗？ - sudo rm -rf

是的，inline-block 是较新的属性，因此您的目标浏览器可能尚未支持它（虽然有许多特定于浏览器的属性以及解决此问题的方法）。优点是包含元素将包裹这些元素；使用 float 时，您需要向父元素添加 CSS。 - Beau Smith

注意：使用 inline-block 可能会导致某些元素对齐不准。我通过确保每个元素具有相同数量的文本行来解决了这个问题。 - FBI Surveillance Van

我喜欢你举例的方式。 - user1448914

Answer 2

将 float:left; 应用于您的两个 div ，可以使它们并排站立。

- JCOC611

---

我可能错了，但是 clear:both; 需要在哪里放置？我从来不是 CSS 专家，但当我看到浮动时，清除也很常见。 - Brad Christie

clear:both的作用恰恰相反。 "浮动元素后面的元素将围绕它流动。要避免这种情况，请使用clear属性。" - JCOC611

@JCOC611：啊，所以当你想要一种瞬时的浮动能力时，往往会使用clear？这很有道理。感谢你的教训。;-) - Brad Christie

为了更加“清晰”（虽然这个词很糟糕），如果您想要在两个对齐的 div 下面再添加第三个 div，则需要使用 <br style="clear: both;" />。 - Tass

@Tass，你只需要将第三个 div 改为以下形式：<div style="clear: both;">...</div>（不需要 br 标签）。 - intrepidis

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

- Miguel Rão Vieira

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

- user7396942