Question

我试图实现一些非常简单的事情，但它只是不能正常工作。 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;
}

Answer 1

如果您要使用float: left;，那么您必须了解这会将文件流中的元素排除在外 - 使其成为文档流程的一部分，您可以我必须在它的父元素上使用overflow: hidden;（或者对于较旧的IE浏览器使用height: 1%;）。

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

Answer 2

这是你可以做的：

拥有一个跨越页面宽度100％的容器div。然后在其中你可以放置两个div，每个div有display:inline-block，宽度约为50％。这本身应该足以为你提供良好的服务。你不需要添加花车来实现这一点，因为简单的display:inline-block就足够了。

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

＆＃13;

.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%;
    
}

＆＃13;

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

＆＃13;

希望这有帮助!!!

Answer 3

你可以使用：

display: inline-block;

for .leftDiv＆amp; .rightDiv

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

Answer 4

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

.leftDiv {
    clear: left;
}

.rightDiv {
    clear: right;
}

使Div对坐在彼此之下的单独的线上

4 个答案: