对齐＆LT; D​​IV＆GT;元件并排 [英] Align <div> elements side by side

问题描述

我知道这是一个相当简单的问题，但我不能弄明白了我的生活。我有我申请的背景图像两个环节。下面是它目前看起来像（道歉的影子，一个按钮，只是一个粗略的草图）：

不过，我想这两个按键并排。我真的不能找出需要与校准完成。

以下是HTML

 ＆LT; D​​IV ID =分贝}＆GT;
    ＆LT; A HREF =htt​​p://notareallink.com称号=下载ID =buyButton＆GT;下载＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =国标＆GT;
    ＆LT; A HREF =＃称号=画廊的onclick =$ J（下'＃galleryDiv）进行切换（'慢'）;返回false; ID =galleryButton＆GT;画廊＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

这里的CSS

  #buyButton {
    背景：网址（资产/ buy.png）0 0不重复;
    显示：块;
    高度：80px;
    宽度：232px;
     文本缩进：-9999px;
}
#buyButton：悬停{
宽度：232px;
高度：80px;
背景位置：-232px 0;
}
#buyButton：活跃{
宽度：232px;
高度：80px;
背景位置：-464px 0;
}

#galleryButton {
    背景：网址（图像/ galleryButton.png）0 0无重复;
    显示：块;
    高度：80px;
    宽度：230px;
     文本缩进：-9999px;
}
#galleryButton：悬停{
宽度：230px;
高度：80px;
背景位置：-230px 0;
}
#galleryButton：活跃{
宽度：230px;
高度：80px;
背景位置：-460px 0;
}
 

解决方案

适用浮动：左; 到这两个的div应该让他们并排站在一起

I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):

However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.

Here's the 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>

Here's the 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;
}

解决方案

Apply float:left; to both of your divs should make them stand side by side.

这篇关于对齐＆LT; D​​IV＆GT;元件并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！