将元素并排对齐[英]Align elements side by side 本文翻译自  sudo rm -rf  查看原文  2011-02-08  186225    css/ html/

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

3 个解决方案

#1

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

应用浮动:左;对你们的两位女主角应该让他们肩并肩站在一起。

#2

Below are the most common ways to achieve two div elements side-by-side…

下面是实现两个div元素的最常见方法……

View/edit these examples on Codepen

在代码页上查看/编辑这些示例

---

Some basic css styles for parent and child elements in these examples:

这些例子中的父母和子元素的一些基本css样式:

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

---

Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)

使用浮动解决方案会对其他元素产生意想不到的影响。(提示:您可能需要使用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;
}

---

#3

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>