Html 如何让两个div并排对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23850525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make two div align side by side?
提问by bondbaby11
I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link
我一直试图让两个 div 并排浮动，或者基本上是购物车和物品（即 jcart 和 cartbox），但似乎无法得到它。这是演示：链接
i tried change float:right;on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!
我尝试float:right;在cartbox css上进行更改，但这只会将购物车向右移动，如果我删除cartbox css上的浮动..购物车和物品并排对齐，但由于某种原因，购物车似乎很小而且“添加到购物车”按钮似乎没有点击。任何帮助将不胜感激！
HTML:
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:
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;
}
回答by Sam Holmes
You need to add display: inline-blockon the elements you wish to align side by side, as divelements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).
您需要添加display: inline-block您希望并排对齐的元素，因为div元素的默认样式为display: block，这意味着它们将垂直而不是水平堆叠（不是您想要的行为）。
From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centrewider (possibly to 1000px instead of 960px), and coupled with the addition of changing the displayproperty, that should do it.
从它的外观来看；购物车箱太宽，无法并排放置在内容容器中。使带有 id 的 divcentre更宽（可能是 1000px 而不是 960px），并加上更改display属性的添加，应该这样做。
In terms of the code you need to write directly in order to get this to change, do the following:
就您需要直接编写的代码而言，为了改变这一点，请执行以下操作：
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
EDIT: I modified these changes to your website locally and it appears to have worked.
编辑：我在本地修改了对您网站的这些更改，它似乎有效。
回答by AssemblyX
add float:leftto your css code in #jcart:
添加float:left到您的 css 代码中#jcart：
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
回答by super
回答by Celestial Dragon of Osiris
It is because you don't have enough space in the parent Divs. I tried to set it to 10px and it allinged fine.
这是因为您在父 Div 中没有足够的空间。我试图将它设置为 10px 并且一切正常。
