因为这个问题给我带来了很多麻烦,所以我现在想辞职了。所以如果有人能帮我,那就太好了。
所以在我的网站上,我想做的是在网站的左边有一个div框,那里会有一个"学习更多"的链接,将带你到另一个页面,解释我的网站是关于什么,我也希望有一个视频在它下面(这将是我解释我的网站)
在另一个div框中,我希望有一个"注册表单"一个基本的注册表单,供用户注册我的网站
现在我的问题是如何把这些盒子或登记表并排对齐。
现在我的问题是对齐的顶部的盒子。当我输入"float:left;"时,它们就会并排对齐(就像我想要的那样)但是其中一个框的顶部边框比另一个高
例如,这是我的网站到目前为止http://www.shoportrade.org/正如你所看到的,两个方框并没有完全对齐,一个比另一个低
我想让它看起来像这样http://www1.picturepush.com/photo/a/12506959/640/12506959.png
有人能帮我吗?我遇到了瓶颈,我真的很想解决这个问题。
我不知道为什么你有所有的break标签,但这是你的语法需要是这样的:
<div id="header">
</div>
<div id="container">
<div class="ex">
</div>
<div class="myform">
</div>
<div class="clear"></div>
</div>
标题将保持相同的方式。你的容器需要把两个盒子都包起来。通常这是居中对齐在页面上的CSS:
.container { width:980px; margin: 0 auto; }
你的。ex类将保持不变(float: left;),你的。myform类也将保持不变(float: left;)。
.clear类负责帮助浏览器计算最终显示高度,通常看起来像:
.clear { clear: both; height: 1px; }
这是因为您的<div id="myform">
后面有<br>
首先,你的编码有一些错误。像
<div id='header'></a href='http://www.shoportrade.org/'><img src='mylogo1.png'></img></a>
应该<div id='header'><a href='http://www.shoportrade.org/'><img src='mylogo1.png' /></a></div>
我相信你在<style>
中声明类myform,但我在你的代码中看到你试图实现这个<div id="myform">
,这是完全错误的。应该是<div class="myform">
。如果你想为这个div实现不同的样式那么我认为你应该使用不同的id名比如<div id='boxstyle'></div>
这是一个不使用浮点数的方法。这两个盒子的高度将根据集装箱的高度而变化。
如果你想让盒子的高度不同,改变它们的"bottom"值。
http://jsfiddle.net/Calum/m783T/CSS #container {
height: 500px;
width: 800px;
position: relative;
background-color: green;
}
#box, #box2 {
position: absolute;
top: 50px;
width: 200px;
}
#box {
background-color: blue;
left: 50px;
bottom: 50px;
}
#box2 {
background-color: red;
right: 50px;
bottom: 50px;
}