如何让一个 div 排列在另一个 div 的右侧而不是它的下方？答案

【问题标题】：How to get a div to line up to the right of another div instead of below it?如何让一个 div 排列在另一个 div 的右侧而不是它的下方？
【发布时间】：2010-11-06 02:39:31
【问题描述】：

<div id="holder">

    <div id="topleft">
    </div>

    <div id="topright">
    </div>

    <div id="main">
    </div>

</div>

我的页面上有这些 div，无论我做什么，topright 都位于 topleft 下方而不是其右侧，从而在页面上使用 topleft 和 @987654325 形成 T 形内容@ 在它们下方的main 内容上方形成一个标题部分。

什么会导致它一直低于topright？

【问题讨论】：

标签： css layout html

【解决方案1】：

div 是块元素，因此默认情况下它们是其容器的 100%。所以你必须让它们浮动并给它们一个宽度。

#topleft, #topright { float:left; width: 300px } // put in your own width

【讨论】：

+1 ，尽管我认为向@wiki 推荐使用类而不是使用 ID 是正确的。
@jball，你认为他为什么要使用类？
@Galen，类更便携。如果他们需要在页面的另一部分或 divs 具有不同 id 的不同页面上重用此模式，则使用 id 进行样式设置会发生故障，但类可以轻松处理这些情况。
这就是为什么您在某些情况下使用 ID（浏览器匹配更快）并为其他情况使用类。在这种情况下，他使用 ID 可能会更好。如果不进一步了解他的情况，就无法判断。
@Galen IDs 绝对是一种选择，我只是建议不要这样做，原因由people smarter than me 更好地解释

【解决方案2】：

在您的 CSS 中，添加以下内容：

#topleft{
 float: left;
}


#main{
 clear: left;
}

“clear: left”将确保您的主要内容显示在其他两个 DIV 块下方。

【讨论】：