如果 <div> 元素是块级元素，如何将 2 个 div 彼此相邻放置 [重复]答案

【问题标题】：If the <div> Element Is Block Level Element How Could 2 divs Be Placed Next to Each Other [duplicate]如果 <div> 元素是块级元素，如何将 2 个 div 彼此相邻放置 [重复]
【发布时间】：2013-05-09 06:33:04
【问题描述】：

根据w3schools.com了解到该元素是块级元素（即浏览器会在其前后显示一个换行符）。

那么 2 个 div 怎么能并排放置呢？

来自 w3schools 的一些代码：

<!DOCTYPE html>
   <html>
      <body>

         <div id="container" style="width:500px">

            <div id="header" style="background-color:#FFA500;">
               <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
         </div>

         <div id="menu" style="background color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
         </div>

         <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here
         </div>

         <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com
         </div>

         </div>
      </body>
   </html>

【问题讨论】：

请看本站：w3fools.com
看看css float
和绝对定位以及将显示类型更改为其他内容，例如 inline-block... 真的取决于您在布局中需要什么。

标签： html

【解决方案1】：

“默认情况下，块级元素的格式与行内元素不同。一般来说，块级元素从新行开始，行内元素则不然。”

两个块级元素通常会从新行开始，但您可以通过float 属性将它们并排放置。在您的代码中，您将这部分放在 div 样式中，使它们并排排列。

float: left;

【讨论】：

没有。停止传递到 w3schools 的链接。 w3fools.com
好吧，只需 google css float 并了解 float 的来龙去脉，因为它非常有用。如果你正在学习定位，我认为 lynda 的 css 定位教程也是一个很好的起点。
谢谢。我的目标是接下来学习 CSS。

【解决方案2】：

HTML：

<div class="sidebyside">I'm stuff!</div>
<div class="sidebyside">I'm other stuff!</div>

CSS：

.sidebyside {
    float: left;
    width: 50%;
}

Demo

【讨论】：

谢谢我已经知道如何将它们并排放置我只是感到困惑，因为他们说浏览器在它之前和之后显示一个断线。
OP 明确询问“如何将 2 个 div 放在一起？”我回答了你的问题。

【解决方案3】：

“并排 div”的快速 google 产生了第一个结果，还有更多！

http://www.welovecss.com/showthread.php?t=465

【讨论】：

这看起来更像是一条评论。