如何将浮动区域彼此分开？

Question

我正在努力处理 SharePoint 网站中的 Bootstrap 行和列。问题是我不能也不想更改源自 SharePoint 的样式，但仍然能够在页面的一部分中使用 Bootstrap 网格。

我试图在没有 Bootstrap 和 SharePoint 的情况下说明问题。这是 JSFiddle：

下面是我的示例的完整说明。问题是，一旦我使用一行将元素 B 与 C、D 和 E 分开，侧面元素 A 的高度会影响第一行的高度，这是我不想要的。我希望元素 C 立即出现在元素 B 的下方。第二个示例是添加 div.row 元素之前的样子。

下面是孤立示例的 HTML 和 CSS。我曾希望我可以以某种方式设置 div.main 元素的样式，以便 A 的浮动根本不会影响 B-E 的浮动。但是我想不通。

请注意，如果我开始更改 HTML 和样式（例如使用位置），我确定有多种解决方案，但我真的只想知道 CSS 其中 div.main 元素获得 "its own" 浮动区域，不受 A 元素浮动的影响。

<style>
  section {
    width: 600px;
    margin: auto;
  }
  .block {
    float: left;
    margin: 10px;
    background-color: #339;
    color: #fff;
    width: 140px;
    padding: 10px;
  }
  .side {
    width: 200px;
    height: 100px;
  }
  .main {
    margin-left: 240px;
  }
  .row:after {
    display: table;
    content: ' ';
    clear: both;
  }
</style>
<section>
  <div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
  <div class="main">
    <div class="row">
      <div class="block">This is element B</div>
    </div>
    <div class="row">
      <div class="block">This is element C</div>
      <div class="block">This is element D</div>
      <div class="block">This is element E</div>
    </div>
  </div>
</section>
<section>
  <div class="side block">This is element A when it works but without rows</div>
  <div class="main">
    <div class="block">This is element B</div>
    <div class="block">This is element C</div>
    <div class="block">This is element D</div>
    <div class="block">This is element E</div>
    <div class="block">This is element F</div>
    <div class="block">This is element G</div>
    <div class="block">This is element H</div>
    <div class="block">This is element I</div>
  </div>
</section>

Answer 1

.main 需要 float:left 并且它的宽度 px 需要更小。

尝试定义

  .side {width:30%; float:left;}
  .main{width:70%; float:left; margin-left:0; }

不要忘记清理 .main 的左边距

Answer 2

row:after 伪类上的 clear: both 属性导致您的第二行跳到左浮动的 side 元素下方。

在 bootstrap 中，您应该在 side 元素上使用类名 col-md-4，在 main 元素上使用类名 col-md-8，并删除 float: left 属性来自你的 side 元素。这将为您提供 2 列，一列用于 side，宽度为 4 个网格，另一列用于 main，宽度为 8 个网格。浮动消失后，您的行应按预期运行。

<style>
  section {
    width: 600px;
    margin: auto;
  }
  .block {
    background-color: #339;
    color: #fff;
    padding: 10px;
  }
</style>

<section class="row">
  <div class="block col-md-4">This is element A</div>
  <div class="col-md-8">
    <div class="row">
      <div class="block col-md-6">This is element B</div>
    </div>
    <div class="row">
      <div class="block col-md-6">This is element C</div>
      <div class="block col-md-6">This is element D</div>
      <div class="block col-md-6">This is element E</div>
    </div>
  </div>
</section>

一般来说，bootstrap 你不想让东西漂浮。此外，与其显式设置元素宽度，不如使用 .col- 类将它们放入 bootstrap 网格系统。

Answer 3

如果您将 .main 的 CSS 更改为此 (display: table-row;):

，则似乎有效

.main {
  margin-left: 240px;
  display: table-row;
}

已更新 JSFiddle here

更新 1

已将 table 更改为 table-row，因为它在 IE10 中不起作用。

更新 2

为了将来参考，SharePoint / O365 中使用的最终解决方案类似于 this:

HTML（.container 是一个 bootstrap 容器）

<div id="DeltaPlaceHolderMain">
    <div class="container">
        <div class="inner-container">
            <!--Your content here-->
        </div>
    </div>
</div>

CSS

.container .inner-container {
    display: inline-block;
    width: 100%;
}

如何将浮动区域彼此分开？

How can I separate areas with floats from each other?

css

css-float

twitter-bootstrap