使用 CSS 围绕另一个定位元素

Question

我想用 HTML 和 CSS 实现这个结果:

其中红色框是大内容（PDF 内容），蓝色框围绕它组织。先在它的旁边，然后，当有足够的空间时，在它下面。

我的HTML结构如下，不过我可以改一下：

<div id="outerContainer">
    <div id="bigRedBox"></div>
    <div>
        <ul id="blueContentList">
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
        </ul>
    </div>
</div>

目前定位是这样的：

我不知道如果不设置两个容器（一个在侧面，一个在下面）是否可行，我可以这样做，但是会让我写很多 JS。

Answer 1

您可以查看bootstrap已经提供的网格结构。或者，您也可以尝试通过将 float : left 应用于所有方形元素来实现此目的。

Answer 2

您可以通过让所有元素浮动并成为彼此的兄弟姐妹来实现您想要的。

#bigRedBox {
  width:80%;
  height:150px;
  background-color:red;
  float:left;
  margin:5px;
}
.blueContent {
  width:15%;
  height:50px;
  background-color:blue;
  float:left;
  margin:5px;
}

<div id="outerContainer">
  <div id="bigRedBox"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
</div>

Answer 3

你可以对列表项做这样的事情，当然，它不是响应式的，但你可以使用 % 或媒体查询来优化它。

#blueContentList li{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    float: left;
}

http://jsfiddle.net/tomsarduy/ywms6soq/

Answer 4

我个人不会使用花车。我建议使用 column/row 类型的布局。这是 fiddle：http://jsfiddle.net/xa91f4Lw/

只需使用 display: inline-block 并在您想要新的东西时使用普通的 divs "row"

新 fiddle: http://jsfiddle.net/xa91f4Lw/1/

或者这个：http://jsfiddle.net/xa91f4Lw/2/

使用 CSS 围绕另一个定位元素

Position elements around another with CSS

html

css

css-position