[英]How do I align two different div boxes side by side?
I'm new to codes so I don't know if the div boxes are exactly "different" but one is a box with just plain text that I am going to write in and the other is a form box(I already have it set up and everything) for people to sign up. 我是代码的新手,所以我不知道div框是否完全“不同”,但一个是仅包含要写入的纯文本的框,另一个是表单框(我已经设置了它)以及所有内容)供人们注册。
My one and only problem is I can't figure out how to put the two different div boxes side by side. 我唯一的问题是我不知道如何将两个不同的div框并排放置。 This is what my page looks like right now http://www5.picturepush.com/photo/a/12472673/640/12472673.png As you can see they do not align at the top very well.
这就是我的页面现在的样子http://www5.picturepush.com/photo/a/12472673/640/12472673.png如您所见,它们在顶部的排列不太好。 I used the float property which made it align incorectly
我使用了float属性使它无法正确对齐
However, I want them to align perfectly from the top of the border and I want a little separation between the two in the middle. 但是,我希望它们从边框的顶部完全对齐,并且我希望两者之间在中间稍微分开。 Kinda like this http://www1.picturepush.com/photo/a/12472719/640/12472719.png
有点像这样的http://www1.picturepush.com/photo/a/12472719/640/12472719.png
Whats the best way to do it? 最好的方法是什么? Thank you for your help.
谢谢您的帮助。
Use the float
property. 使用
float
属性。
.left { float: left; }
http://www.w3schools.com/cssref/pr_class_float.asp http://www.w3schools.com/cssref/pr_class_float.asp
Here try this. 在这里试试。 Give you a link to jsfiddle where you can see the live code working as you wish.
给您一个指向jsfiddle的链接,您可以在其中看到所需的实时代码。
http://jsfiddle.net/9kNDe/ http://jsfiddle.net/9kNDe/
<div class="big_box">
<div class="box">do some in here</div>
<div class="box"> do some in here</div>
<div class="clear"></div>
</div>
<style>
.big_box {
width: 500px;
text-align: center;
margin: 0 auto;
}
.box { width: 200px; float: left; border: 1px solid #000; margin: 3px; }
.clear { clear: both }
</style>
<style>
.holder
{
clear:both;
}
.holder div
{
width:100px;
height:100px;
float:left;
border:1px solid #333;
background-color:#ccc;
}
.holder .right
{
margin-left:20px;
border:1px solid #000;
background-color:#333;
}
</style>
<div class="holder">
<div class="left"></div>
<div class="right"></div>
</div>
您还可以使用display: inline-block
属性
<style type="text/css">
.container { width:500px; }
.l { width:200px; }
.r { width:200px; float: right; }
</style>
<div class="container">
<div class="l">123</div>
<div class="r">123</div>
</div>
The display: inline-block
property is probably what you're looking for. display: inline-block
属性可能是您想要的。
HTML 的HTML
<div id="box1"></div>
<div id="box2"></div>
CSS 的CSS
#box1, #box2 {
width: 200px;
height: 100px;
position: relative;
display: inline-block;
}
#box1 {
background: #00FFFF;
}
#box2 {
background: #FF00FF;
}
You could use CSS and display: table
to obtain boxes having the same height whatever their content (without relying on HTML tables for obtaining this layout, this is considered as poor coding with a reason). 您可以使用CSS和
display: table
来获取具有相同高度的框,而不管其内容如何(不依赖HTML表来获取此布局,这被认为是编码不良的一个原因)。
Here's a demo: http://jsfiddle.net/gtXv5/1/ 这是一个演示: http : //jsfiddle.net/gtXv5/1/
HTML: HTML:
<div class="row">
<div class="col box">same<br>height<br>as the<br>other<br>.box<br>whatever<br>the<br>content.<br></div>
<div class="col gutter"><!-- empty "cell" --></div>
<div class="col box">content lorem ipsum</div>
</div>
CSS: CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
display: table;
table-layout: fixed;
width: 500px;
margin: 0 auto;
}
.col {
display: table-cell;
}
.box {
width: 200px;
border: 1px solid #777;
padding: 15px;
text-align: center;
color: #222;
background-color: lightblue;
}
.gutter {
width: 100px;
background: transparent;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.