用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

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

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

您可以对列表项执行类似的操作，当然，它不是响应式的，但您可以使用 % 或媒体查询来优化它。

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

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