并排对齐 < 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;
}
372518 次浏览
小开
最佳答案

应用 float:left;到您的两个 div 应该使他们并排站立。

小开

小心 float: left..

有很多方法可以让元素并排排列。

下面是实现两个元素并列的最常用方法..。

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

下面所有例子的基本样式..。

这些例子中的 parent和 child元素的一些基本 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
}
小开

简单点

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

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


提交答案