我的网站有问题？对齐两个 div 时遇到问题答案

【问题标题】：Having trouble with my website? Having problems aligning two divs我的网站有问题？对齐两个 div 时遇到问题
【发布时间】：2013-03-25 18:15:44
【问题描述】：

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

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

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

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

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

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

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

谁能帮帮我？我碰壁了，我真的很想解决这个问题。

【问题讨论】：

首先，我会让我的 HTML 有效。例如查看您的</a href...>。
我对您的问题感到困惑。他们看起来像是在排队等候我。你在看什么浏览器？我建议在 HTML 编辑器中使用类似 Firebug（Firefox 插件）或 Chrome(F12)/Opera(Ctrl+Shift+i)/IE(F12) 之类的东西来调整您的 CSS，使其完全符合您的要求。他们中的大多数也可以帮助您进行 CSS 布局。
请阅读。您不应该发布您的网址。您应该发布您的代码。 meta.stackexchange.com/questions/125997/…
您可以在右边的框中添加一些上边距。它有点小技巧，但应该可以。如果您实际上可以创建一个 jsfiddle 示例，它会更容易调试。
btevfik 这里有一个 jfiddle jsfiddle.net/9fKPL 你能弄清楚如何将我已经拥有的盒子完美地并排对齐吗？随时纠正我的错误，哈哈，我是新手，正在学习，非常感谢。

标签： php html css

【解决方案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; }

【讨论】：

【解决方案2】：

这是因为您的<div id="myform"> 后面有<br>。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：