html - 如何使两个div并排对齐？

This question already has answers here:

Align <div> elements side by side

(4个答案)


已关闭6年。




我一直在尝试使两个div并排或基本上是购物车和商品(即jcart和cartbox) float ，但似乎无法理解。这是演示:link

我尝试更改购物车css上的float:right;，但这只会将购物车移至右侧，并且如果我移除购物车css上的 float 。。购物车和物品并排对齐，但出于某种原因，购物车看起来确实很小并且“添加到购物车”按钮似乎没有被点击。任何帮助将不胜感激!

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

最佳答案

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

从外观上看；购物车的包装盒太宽，无法同时容纳在内容容器中。使id为centre的div更大(可能为1000px而不是960px)，并加上更改display属性的附加功能，应该做到这一点。

对于需要更改的代码，您需要直接编写，请执行以下操作:

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

编辑:我修改了这些更改到您的本地网站，它似乎已经起作用。

关于html - 如何使两个div并排对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23850525/