如何使两个div并排对齐？

Question

我一直在尝试将两个div并排浮动，或者说是购物车和商品（即jcart和cartbox），但似乎做不到。这是演示页面：链接。

我试过在cartbox的CSS中修改float:right;，但这只会将购物车移动到右侧。如果我去掉cartbox CSS中的浮动，购物车和商品就能并排对齐，但由于某些原因，购物车看起来非常小，"add to cart"按钮也无法点击。感谢任何帮助！ HTML:

  <form method="post" action="" class="jcart">
    <fieldset>
      // item details here
    </fieldset>
  </form>

  <div class='cartbox'>
    <div id="jcart"><?php $jcart->display_cart();?></div>
    <div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
  </div>

CSS:

#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}

.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}

.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}

- bondbaby11

---

在提出新问题之前，请先在 Stack Overflow 进行搜索。你会发现这个问题已经被问了很多次！ - Lee Taylor

一个踩票有点过分了！在发布之前我花了很多时间来工作，但我仍然道歉。 - bondbaby11

也可以只使用 span 标签，因为它的默认显示是内联块。 - cchamberlain

Answer 1

你需要在希望并排对齐的元素上添加display: inline-block，因为div元素具有默认样式 display: block ，这意味着它们会垂直堆叠而不是水平排列（这不是您想要的行为）。

从外观上看，购物车框在内容容器中过宽，无法并排放置。将ID为centre的div变宽（可能是1000px而不是960px），再加上更改 display 属性，就可以了。

要使此更改生效，您需要直接编写以下代码：

<code><code><code>#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}
</code></code></code>

编辑：我在本地修改了这些更改并且看起来它已经奏效。

- Sam Holmes

---

谢谢，它完美地工作了！ - bondbaby11

Answer 2

在您的CSS代码中添加float:left到#jcart：

#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}

- AssemblyX

---

那不起作用了...购物车只出现在左侧，但仍然在物品下面。 - user3291093

Answer 3

你可以像 @Sam Holmes 说的那样，使用 display 属性来设置为 inline 或 inline-block。

或者你也可以使用 float 来实现，就像这样：

.cartbox div{
    float:left;
}

或者

.cartbox div{
     display:inline;// or display:inline-block;
}

这里是演示。

- super

Answer 4

这是因为您的父级Div没有足够的空间。 我尝试将其设置为10px，它就对齐了。

- Celestial Dragon of Osiris