Html 并排对齐 <div> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4938716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align <div> elements side by side
提问by sudo rm -rf
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
这是 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
这是 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;
}
回答by JCOC611
Apply float:left;to both of your divs should make them stand side by side.
应用于float:left;您的两个 div 应该使它们并排站立。
回答by Beau Smith
Beware float: left…
当心float: left…
…there are many ways to align elements side-by-side.
...有很多方法可以并排对齐元素。
Below are the most common ways to achieve two elements side-by-side…
以下是并排实现两个元素的最常见方法……
Demo: View/edit all the below examples on Codepen
演示：在 Codepen 上查看/编辑以下所有示例
Basic styles for all examples below…
以下所有示例的基本样式...
Some basic css styles for parentand childelements in these examples:
这些示例中的parent和child元素的一些基本 css 样式：
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the floatsolution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
使用该float解决方案我会对其他元素产生意外影响。（提示：您可能需要使用clearfix。）
html
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
css
.float-left-child {
float: left;
}
html
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
注意：这两个子元素之间的空格可以通过删除 div 标签之间的空格来删除：
html
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
css
.inline-block-child {
display: inline-block;
}
html
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
css
.inline-flex-parent {
display: inline-flex;
}
html
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
回答by Miguel R?o Vieira
keep it simple
把事情简单化
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
