并排对齐<div>元素


127

我知道这是一个相当简单的问题,但我无法一生解决。我有两个链接,这些链接已应用了背景图片。这是当前的样子(对阴影表示歉意,只是按钮的粗略草图):

在此处输入图片说明

但是,我希望这两个按钮可以并排放置。我真的无法弄清楚对齐需要做什么。

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

5
刚读标题就想到的第一个是float:left;
JCOC611

2
@ JCOC611:完美地适用float:left;于两个div。您可以发表评论作为答案吗?谢谢!
sudo rm -rf

1
第二个是,display: inline-block;但是它得到的支持较少……
合资公司

1
float:left可以放在容器中,但是我会尝试使用两个<span>标记代替按钮的<div>。
shiftycow 2011年

如前所述,添加float:left; 到#buyButton和#galleryButton,然后添加另一个带有clear的元素:清除浮动。为什么使用div(块元素)包装<a>?
ludesign 2011年

Answers:


154

应用于float:left;两个div都应使其并排站立。


我误会了,还是clear:both;需要去某个地方?我从来都不是CSS专家,但是当我看到浮动对象也看到清除对象时,这似乎很典型。
布拉德·克里斯蒂

4
clear:both相反。“浮动元素之后的元素将在其周围流动。为避免这种情况,请使用clear属性。”
JCOC611

@ JCOC611:嗯,当您想要瞬时浮动能力时,通常会这么清楚吗?说得通。感谢您的教训。;-)
Brad Christie

7
只是为了“清楚”(我知道这太可怕了),<br style="clear: both;" />如果要在对齐的两个div之下要第三个div,则需要使用。
塔斯(Tass),2013年

3
@Tass,您只需要像这样的第三个div :(<div style="clear: both;">...</div>无需br)
intrepidis

136

当心float: left……🤔

…有很多方法可以并排对齐元素。

下面是并排实现两个元素的最常见方法。

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


下面所有示例的基本样式…

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

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

向左飘浮

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

显示:行内块

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标签之间的空格来删除这两个子元素之间的空格:

显示:行内块(无空格)

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

显示方式

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

显示方式: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;
}

显示:网格

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
}


2
是的,但是我听说使用inline-block存在一些兼容性问题。另外,使用该方法有float什么好处?
sudo rm -rf

1
是的,inline-block是较新的,因此您的目标浏览器可能尚不支持它(尽管有许多特定于浏览器的属性以及解决方法)。好处是contains元素将包装元素;与float您将不得不添加CSS到父元素。
Beau Smith,

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.