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/

Answer 3

我个人不会使用花车。我建议使用列/行类型的布局。这是一个小提琴：http://jsfiddle.net/xa91f4Lw/

只需使用display: inline-block并使用简单的div，当你想要一个新的＆＃34;行＆＃34;

新小提琴：http://jsfiddle.net/xa91f4Lw/1/

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

Answer 4

您可以检查bootstrap已经提供的网格结构。或者，您也可以尝试将float : left应用于所有方形元素。

用CSS定位另一个元素

4 个答案: