Html 如何使两个div并排对齐?
我一直试图让两个div并排浮动,或者基本上是购物车和物品(即jcart和cartbox),但似乎无法得到它。以下是演示: 我试着改变Html 如何使两个div并排对齐?,html,css,Html,Css,我一直试图让两个div并排浮动,或者基本上是购物车和物品(即jcart和cartbox),但似乎无法得到它。以下是演示: 我试着改变float:right在cartbox css上,但这只会将购物车向右移动,如果我删除cartbox css上的浮动。。购物车和物品并排排列,但由于某些原因,购物车看起来非常小,“添加到购物车”按钮似乎没有点击。任何帮助都将不胜感激 HTML: <form method="post" action="" class="jcart"> <
float:right
在cartbox css上,但这只会将购物车向右移动,如果我删除cartbox 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>
#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;
}
编辑:我在本地修改了这些对你网站的更改,看起来效果不错
您可以使用display属性内联或内联块,如@Sam Holmes所说
或者您可以使用float做一些事情。像这样:
.cartbox div{
float:left;
}
或
以下是原因是父div中没有足够的空间。
我尝试将其设置为10px,结果一切正常。将浮点:left
添加到#jcart
中的css代码中:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
那没用。。。购物车刚刚出现在左侧,但仍在项目下方请在询问新问题之前搜索。你会发现这个问题被问了很多遍!否决票有点苛刻!在发布之前我做了很长时间,但我仍然很抱歉。也可以使用span标记,因为它的默认显示是inline-block。谢谢。。。它工作得很好!
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}