如何让两个div并排对齐？ [复制]答案

【问题标题】：How to make two div align side by side? [duplicate]如何让两个div并排对齐？ [复制]
【发布时间】：2014-07-14 01:41:25
【问题描述】：

我一直试图让两个 div 并排浮动，或者基本上是购物车和物品（即 jcart 和 cartbox），但似乎无法得到它。这是演示：link

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

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

【问题讨论】：

在提出新问题之前请搜索 SO。你会发现这个问题被问了很多遍！
投反对票有点苛刻！在发布之前我已经研究了很长时间，但我仍然道歉。
也可以只使用 span 标签，因为它的默认显示是 inline-block。

标签： html css

【解决方案1】：

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

从外观上看；购物车箱太宽，无法并排放入内容容器中。使 id 为 centre 的 div 更宽（可能是 1000 像素而不是 960 像素），再加上更改 display 属性，应该可以做到。

就您需要直接编写的代码来改变它而言，请执行以下操作：

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

编辑：我在本地修改了对您网站的这些更改，并且似乎有效。

【讨论】：

谢谢...完美运行！

【解决方案2】：

将float:left 添加到#jcart 中的css 代码：

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

【讨论】：

这不起作用...购物车刚刚出现在左侧，但仍在项目下方

【解决方案3】：

正如@Sam Holmes 所说，您可以使用 display 属性内联或内联块

或者你可以使用浮点数来做一些事情。像这样：

.cartbox div{
    float:left;
}

或

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

这里是 Demo

【讨论】：

【解决方案4】：

这是因为您在父 Div 中没有足够的空间。我尝试将其设置为 10 像素，结果很好。

【讨论】：