css - 通过sid对齐<div>元素

我知道这是一个相当简单的问题,但我无法弄清楚我的生活。 我有两个链接,我已经应用了背景图像。 这是它目前的样子(为阴影道歉,只是按钮的粗略草图):

enter image description here

但是,我希望这两个按钮并排。 我无法弄清楚对齐需要做些什么。

这是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 asked 2019-08-13T08:34:20Z
3个解决方案
130 votes

对两个div应用float:left;应使它们并排放置。

JCOC611 answered 2019-08-13T08:34:34Z
88 votes

当心float ...🤔

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

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

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


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

这些示例中的floatchild元素的一些基本CSS样式:

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

float:left

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

display:inline-block

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标记之间的空格,可以删除这两个子元素之间的空格:

display:inline-block (no space)

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

display:flex

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

display:inline-flex

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

display:grid

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 answered 2019-08-13T08:36:09Z
6 votes

把事情简单化

<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 answered 2019-08-13T08:36:35Z
translate from https://stackoverflow.com:/questions/4938716/align-div-elements-side-by-side