Html 我如何创建两个盒子来将内容放在一起，彼此相邻？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18793264/
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 do I create two boxes to put content in them, next to each other?
提问by user2773016
I want to create two boxes next to each other. I tried many attempts to create boxes to be next to each other but the code always pours outside the box. If anyone could help it would be greatly appreciate.
我想创建两个相邻的框。我尝试了很多尝试来创建彼此相邻的盒子，但代码总是倒在盒子外面。如果有人可以提供帮助，将不胜感激。
回答by chopper
Like so:
像这样：
CSS:
CSS：
.box {
float: left;
width: 200px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
border: 2px solid blue;
}
HTML
HTML
<div class="box">Lorem</div>
<div class="box">Ipsum</div>
See this jsFiddleto see the code in action.
请参阅此 jsFiddle以查看正在运行的代码。
回答by UID
You can create by simply using "display:inline-block".
And if you think the height can differ for each box then use "vertical-align:top" along with that.
您只需使用“ display:inline-block”即可创建。如果您认为每个盒子的高度可能不同，那么请使用“ vertical-align:top”。
Please see the code below: HTML
请看下面的代码： HTML
<div>ddbsakdyagdkyhasd<br/> <br/> </div>
<div>ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd
<br/>
ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd <br/>
ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd
</div>
CSS
CSS
div {
display: inline-block;
width:200px;
border:1px solid;
vertical-align:top
}
Please refer to Fiddle:- http://jsfiddle.net/e6WqU/
请参考小提琴：- http://jsfiddle.net/e6WqU/
Let me know if this works for you.
让我知道这是否适合您。
Enjoy!!
享受！！
