html – 用CSS定位另一个元素

我想用 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.

解决方法

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

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

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!