HTML – 如何使两个div并排排列？

概述参见英文答案 > Align <div> elements side by side                                    3个 我一直试图让两个div并排浮动或基本上是购物车和物品(即jcart和cartbox),但似乎无法得到它.这是演示： link 我试过改变浮动：对;在cartbox css但只会将购物车移到右边,如果我移除了cartbox css上的浮动. 参见英文答案 > Align <div> elements side by side3个
我一直试图让两个div并排浮动或基本上是购物车和物品(即jcart和cartBox),但似乎无法得到它.这是演示： link

我试过改变浮动：对;在cartBox CSS但只会将购物车移到右边,如果我移除了cartBox CSS上的浮动..购物车和物品并排排列但是由于某种原因,购物车看起来很小而且“添加”购物车“按钮似乎没有点击.任何帮助将不胜感激！

HTML：

<form method="post" action="" >    <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中心的div更宽(可能为1000px而不是960px),再加上更改显示属性,应该这样做.

就您需要直接编写的代码而言,要进行更改,请执行以下 *** 作：

#centre {    wIDth: 1000px;}.cartBox {    display: inline-block;}

编辑：我在本地修改了这些更改到您的网站,它似乎工作.

总结

以上是内存溢出为你收集整理的HTML – 如何使两个div并排排列？全部内容，希望文章能够帮你解决HTML – 如何使两个div并排排列？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。