并排对齐<div>元素

Question

并排对齐<div>元素我知道这是一个相当简单的问题，但我无法弄清楚我的生活。我有两个链接，我已经应用了背景图像。这是它目前的样子（为阴影道歉，只是按钮的粗略草图）：但是，我希望这两个按钮并排。我无法弄清楚对齐需要做些什么。这是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;}

Answer 1

适用float:left;于你的两个div应该让它们并排站立。

Answer 2

小心float: left......?

...有许多方法可以并排排列元素。

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

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

---

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

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

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

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>