并排alignment<div>元素

我知道这是一个相当简单的问题，但我无法弄清楚我的生活。 我有两个链接，我已经应用了一个背景图像。 这是它目前的样子（对阴影的道歉，只是一个button的粗略草图）：

不过，我希望这两个button是并排的。 我不能真正弄清楚需要做什么。

这是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; 对你们的双方应该让他们并肩站立。

Answer 2

使用float解决scheme我有意想不到的影响其他元素。 （提示：您可能需要使用clearfix 。）

为了避免影响页面上的其他元素，请在每个div上使用display: inline-block …

 <div style="display: inline-block">Button 1</div> <div style="display: inline-block">Button 2</div> 

鉴于您的需求， display: flex也可能是一个理想的解决scheme。

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>