Question

所以我想要放弃，因为这个问题给了我很多麻烦。所以，如果有人能帮助我，那就太棒了：D！

因此，在我的网站上，我想要做的是在网站左侧有一个div框，其中会有一个“了解更多”链接，将带您到另一个页面解释我的网站是什么，我会也喜欢在它下面有一个视频（这将是我解释我的网站）

在另一个div框中，我希望有一个“注册表单”，一个基本的注册表单，供用户注册我的网站

现在我的问题是没有把盒子或注册表并排排列。

现在我的问题是盒子顶部的对齐方式。当我把“浮动：左;”它将它们并排排列（完全像我想要的那样）然而，盒子的顶部边框之一比另一个

更高

例如，到目前为止这是我的网站http://www.shoportrade.org/ 正如您所看到的那样，框没有完全从边框顶部对齐，一个低于另一个

我希望它看起来像这样http://www1.picturepush.com/photo/a/12506959/640/12506959.png

有人能帮帮我吗？我撞墙了，我真的想把这个问题搞清楚。

Answer 1

我不知道为什么你有所有的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; }

Answer 2

这是因为<br>之后你有<div id="myform">。

Answer 3

首先，您的编码存在一些错误。像

<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>

Answer 4

这是一种不使用浮点数的方法。两个盒子的高度将根据容器高度而变化。

如果您希望框的高度不同，请更改其“底部”值。

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;
}

<强> HTML

<div id="container">
    <div id="box">
        <p>This is box 1</p>
    </div>
    <div id="box2">
        <p>This is box 2</p>
    </div>
</div>

我的网站有问题？在调整两个div时遇到问题

4 个答案: