使 Div 对位于彼此下方的单独行上答案

【问题标题】：Make Div Pairs Sit On Separate Lines Below Each Other使 Div 对位于彼此下方的单独行上
【发布时间】：2015-01-12 07:05:43
【问题描述】：

我正在尝试实现一些非常简单的东西，但它只是无法正常工作。 2 个 div 应该彼此相邻（内联），但接下来的 2 个 div 应该位于下面的下一行（但也应该彼此相邻）。

请查看我的JSFiddle 以获取该问题的简单示例。您会看到所有 div 都彼此相邻（内联）在同一行上。也许我需要明确定义body 宽度或.container 宽度？问题是这些 div 最终会滑动

你知道我怎样才能让 2 个 div 对彼此下方吗？

HTML：

<div class="container">
    <div class="leftDiv">
        <p>ITEM 1</p>
    </div>
    <div class="rightDiv">
        <p>BLURB: I SHOULD SIT RIGHT OF ITEM 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<div class="container">
    <div class="leftDiv">
        <p>ITEM 2: I SHOULD SIT BELOW ITEM 1.</p>
    </div>
    <div class="rightDiv">
        <p>BLURB: I SHOULD SIT RIGHT OF ITEM 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do</p>
    </div>
</div>

<div class="container">
    <div class="leftDiv">
        <p>ITEM 3: I SHOULD SIT BELOW ITEM 2.</p>
    </div>
    <div class="rightDiv">
        <p>BLURB: I SHOULD SIT RIGHT OF ITEM 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS：

.container {
    text-align: center;
    background-color: red;
}

.leftDiv {
    width: 358px;
    background-color: blue;
    float: left;
}

.rightDiv {
    width: 508px;
    background-color: green;
    float: left;
}

【问题讨论】：

clear:left;
欢迎来到 Stack Overflow！请不要试图通过标记不是真正代码的单词来规避规则，以便您可以发布 JSFiddle 链接。它会让你的问题被否决并关闭。
@TylerH 对不起？通过标记单词，您的意思是我的问题标签“html”和“css”是完全相关的。我也很清楚如何以及何时在问题中发布代码，添加 JS 小提琴对于回答者来说是一种更简洁且易于理解的格式。如果您想反驳这一点，请查看 HTML 标记问题的所有答案，并计算将解决方案发布为 JSFiddle 链接的答案数量。
@Hoops 不，我的意思是标记单词body 和.container；如果不标记这些单词（在它们周围使用 ` 字符），您将被禁止在您的帖子中包含 JSFiddle 链接。这是因为您需要在此处共享您的代码，以防 JSFiddle 死机或被删除以进行维护等。
@TylerH 根据你的逻辑，这个问题的 75% 的答案应该是“否决并关闭”，此外，对于标记为“HTML”、“CSS”和“Javascript”的问题，也有类似的大多数答案' 也应该有相同的结果。看到你考虑不周的“逻辑”中的错误了吗？您是否认真断言未添加<> 字符构成用户“规避”规则。另一种情况是版主渴望使用他们获得的工具/特权，而不是在必要和相关时应用工具/特权

标签： html css

【解决方案1】：

如果您要使用float: left;，那么您必须了解这会将元素从文档流中取出——要使其成为文档流的一部分，您必须使用overflow: hidden; on它是父元素（或 height: 1%; 对于旧版 IE 浏览器）。

这应该可以解决您遇到的问题。在此处查看我对您的小提琴的更新：http://jsfiddle.net/9y6pt2yp/7/

【讨论】：

【解决方案2】：

这是你可以做的：

拥有一个跨越页面 100% 宽度的容器 div。然后，您可以在其中放置两个 div，每个具有display:inline-block 和大约 50% 的宽度。这本身应该足以很好地为您服务。您不需要添加浮点数来实现这一点，因为简单的display:inline-block 就足够了。

以下是您需要 HTML 和 CSS 的方式：

.container {
    display:block;
    width:100%;
    margin:20px auto;
}

.fLeft {
    display:inline-block;
    width:49.16%;
    background-color:Blue;
    margin:2px auto;
    font-weight:bold;
    color:White;
}

.fRight {
    color:White;
    font-weight:bold;
    background-color:green;
    display:inline-block;
    width:49.16%;
    
}

<div clas="container">
    <div class="fLeft">ITEM 1</div>
    <div class="fRight">Right of ITEM 1</div>
</div>
<div clas="container">
    <div class="fLeft">ITEM 2</div>
    <div class="fRight">Right of ITEM 1</div>
</div>
<div clas="container">
    <div class="fLeft">ITEM 3</div>
    <div class="fRight">Right of ITEM 1</div>
</div>
<div clas="container">
    <div class="fLeft">ITEM 4</div>
    <div class="fRight">Right of ITEM 1</div>
</div>

希望对你有帮助！！！

【讨论】：

【解决方案3】：

我想你想要http://jsfiddle.net/9y6pt2yp/5/

.leftDiv {
    clear: left;
}

.rightDiv {
    clear: right;
}

【讨论】：

不错的简单跨浏览器解决方案

【解决方案4】：

你可以使用：

display: inline-block;

对于 .leftDiv 和 .rightDiv

更新了 jsfiddle http://jsfiddle.net/9y6pt2yp/4/

【讨论】：