我一直试图让两个div并排浮动或基本上是购物车和物品(即jcart和cartbox),但似乎无法得到它。以下是演示:link
我尝试在购物车css上更改float:right;
,但这只会将购物车移到右边,如果我移除购物车上的浮动css ..购物车和物品并排排列但是对于某些推车看起来很小,并且“#34;添加到购物车"按钮似乎没有点击。任何帮助将不胜感激!
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;
}
答案 0 :(得分:9)
您需要在要并排排列的元素上添加display: inline-block
,因为div
元素的默认样式为display: block
,这意味着它们将垂直堆叠而不是水平堆叠(不是你想要的行为。
从它的外观;购物车盒太宽而且不能在内容容器中并排放置。使id为centre
的div更宽(可能为1000px而不是960px),再加上更改display
属性,应该这样做。
就需要直接编写以便更改此代码的代码而言,请执行以下操作:
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
编辑:我在本地将这些更改修改为您的网站,似乎已经有效。
答案 1 :(得分:2)
将float:left
添加到#jcart
中的css代码:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
答案 2 :(得分:1)
您可以将显示属性用于内联或内联块,如@Sam Holmes所说
或者您可以使用float做一些事情。像这样:
.cartbox div{
float:left;
}
或
.cartbox div{
display:inline;// or display:inline-block;
}
这里是 Demo
答案 3 :(得分:1)
这是因为你在父母Divs中没有足够的空间。 我试着把它设置为10px,并且它很好。