并排对齐 <div> 元素
Posted
技术标签:
【中文标题】并排对齐 <div> 元素【英文标题】:Align <div> elements side by side 【发布时间】:2011-06-23 17:57:39 【问题描述】:我知道这是一个相当简单的问题,但我终其一生都无法弄清楚。我有两个已应用背景图像的链接。这是它目前的样子(为阴影道歉,只是一个按钮的粗略草图):
但是,我希望这两个按钮并排放置。我真的无法弄清楚对齐需要做什么。
这是 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;
【问题讨论】:
光看标题首先想到的是float:left;
@JCOC611:将float:left;
应用到div
s 上做得很好。您可以发表您的评论作为答案吗?谢谢!
第二个是display: inline-block;
,但它的支持不太好......
float:left inside a container 可以工作,但我会尝试使用两个 标签而不是 s 作为按钮。
如前所述,添加 float: left;到 #buyButton 和 #galleryButton,然后添加另一个元素 clear: both;清除浮动。为什么使用 div(块元素)来包装 ?
【参考方案1】:
当心float: left
…?
…有很多方法可以并排对齐元素。
以下是实现两个元素并排的最常用方法……
演示:View/edit all the below examples on Codepen
以下所有示例的基本样式...
这些示例中parent
和child
元素的一些基本css 样式:
.parent
background: mediumpurple;
padding: 1rem;
.child
border: 1px solid indigo;
padding: 1rem;
使用float
解决方案会对其他元素产生意想不到的影响。 (提示:您可能需要使用clearfix。)
<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;
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
【讨论】:
是的,但我听说使用inline-block
有一些兼容性问题。另外,使用它比 float
有什么优势吗?
是的,inline-block
较新,因此您的目标浏览器可能还不支持它(尽管有许多特定于浏览器的属性和解决方法)。优点是包含元素会包裹元素;使用float
,您必须将 css 添加到父元素。
注意:使用inline-block
可能会导致某些元素错位。 我通过确保每个元素具有相同数量的文本行来解决此问题。
我喜欢你举例子的方式。【参考方案2】:
将float:left;
应用于您的两个 div 应该使它们并排放置。
【讨论】:
我是不是弄错了,还是clear:both;
需要进入某个地方?我从来都不是 CSS 专家,但当我看到浮动也看到清除时,我似乎很典型。
clear:both
将完全相反。 “浮动元素之后的元素将围绕它流动。为避免这种情况,请使用 clear 属性。”
@JCOC611:啊,当你想要一个短暂的浮动能力时,通常会这么清晰?说得通。谢谢你的课。 ;-)
只是为了“清楚”(我知道这很糟糕),如果您想要在对齐的两个 div 下方有第三个 div,则需要使用 <br style="clear: both;" />
。
@Tass 你只需要像这样的第三个 div:<div style="clear: both;">...</div>
(不需要 br)【参考方案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>
【讨论】:
【参考方案4】:.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>
【讨论】:
以上是关于并排对齐 <div> 元素的主要内容,如果未能解决你的问题,请参考以下文章