并排对齐<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&nbsp;{ &nbsp;&nbsp;background:&nbsp;mediumpurple; &nbsp;&nbsp;padding:&nbsp;1rem;}.child&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;indigo; &nbsp;&nbsp;padding:&nbsp;1rem;}使用该float解决方案，我对其他元素产生了意想不到的影响。（提示：您可能需要使用clearfix。）HTML<div&nbsp;class='parent'> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;float-left-child'>A</div> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;float-left-child'>B</div></div>CSS.float-left-child&nbsp;{ &nbsp;&nbsp;float:&nbsp;left;}HTML<div&nbsp;class='parent'> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;inline-block-child'>A</div> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;inline-block-child'>B</div></div>CSS.inline-block-child&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block;}注意：通过删除div标记之间的空格，可以删除这两个子元素之间的空格：HTML<div&nbsp;class='parent'> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;inline-block-child'>A</div><div&nbsp;class='child&nbsp;inline-block-child'>B</div></div>CSS.inline-block-child&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block;}HTML<div&nbsp;class='parent&nbsp;flex-parent'> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;flex-child'>A</div> &nbsp;&nbsp;<div&nbsp;class='child&nbsp;flex-child'>B</div></div>CSS.flex-parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex;}.flex-child&nbsp;{ &nbsp;&nbsp;flex:&nbsp;1;}HTML<div&nbsp;class='parent&nbsp;inline-flex-parent'> &nbsp;&nbsp;<div&nbsp;class='child'>A</div> &nbsp;&nbsp;<div&nbsp;class='child'>B</div></div>CSS.inline-flex-parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-flex;}HTML<div&nbsp;class='parent&nbsp;grid-parent'> &nbsp;&nbsp;<div&nbsp;class='child'>A</div> &nbsp;&nbsp;<div&nbsp;class='child'>B</div></div>CSS.grid-parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr}

Answer 3

把事情简单化<div&nbsp;align="center"><div&nbsp;style="display:&nbsp;inline-block">&nbsp;<img&nbsp;src="img1.png">&nbsp;</div><div&nbsp;style="display:&nbsp;inline-block">&nbsp;<img&nbsp;src="img2.png">&nbsp;</div></div>