我的网站有问题吗?有问题对准两个潜水器


Having trouble with my website? Having problems aligning two divs

因为这个问题给我带来了很多麻烦,所以我现在想辞职了。所以如果有人能帮我,那就太好了。

所以在我的网站上,我想做的是在网站的左边有一个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;
}