0

所以我正处于想要退出的地步，因为这个问题给我带来的所有麻烦。因此，如果有人可以帮助我，那就太好了：D！

所以在我的网站上，我想做的是在网站的左侧有一个 div 框，那里会有一个“了解更多”链接，可以将您带到另一个页面，解释我的网站是关于什么的，我也想在那里成为它正下方的视频（由我解释我的网站）

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

现在我的问题不是让盒子或注册表单并排对齐。

现在我的问题是盒子顶部的对齐方式。当我输入“float:left;” 它并排对齐它们（就像我想要的那样）但是盒子的一个顶部边框比另一个高

例如，到目前为止，这是我的网站http://www.shoportrade.org/ 如您所见，这些框与边框顶部并没有完全对齐，一个比另一个低

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

有人可以帮我吗？我碰壁了，我真的很想解决这个问题。

4

4 回答 4

1

我不知道为什么你有所有的中断标签，但这是你的语法需要的样子：

<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; }
于 2013-03-25T18:25:05.413 回答
0

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

如果您希望盒子的高度不同，请更改它们的“底部”值。

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>
于 2013-03-25T19:26:35.690 回答
0

首先，您的编码中有一些错误。喜欢

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

我相信您正在声明 class myform in <style>，但我在您的代码中看到您正在尝试实现 this <div id="myform">，这是完全错误的。应该是<div class="myform">。如果您实际上想为该 div 实现不同的样式，那么我认为您应该使用不同的 id 名称，例如<div id='boxstyle'></div>

于 2013-03-25T18:43:34.387 回答
0

这是因为你有<br>你的<div id="myform">.

于 2013-03-25T18:24:36.520 回答