使用CSS在另一个周围定位元素 [英] Position elements around another with CSS

问题描述

我想使用HTML和CSS实现此结果：

I want to achieve this result with HTML and CSS:

其中红色框是一个大内容（一个PDF内容），蓝色框组织它。

Where the red box is a big content (A PDF content), and the blue ones organize around it. First by its side and then, when there is enough room, under it.

我的HTML结构如下，但我可以更改它：

My HTML structure is as follows, but I can change it:

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

现在，定位保持如下：

我不知道如果没有设置两个容器，

I don't know if this is possible without setting up two containers (One on the side, one below), which I can do, but would make me write lots of JS.

推荐答案

你可以这样做列表项，当然，它不响应，但您可以使用％或媒体查询来优化它。

You could do something like this for the list items, of course, it's not responsive, but you can use % or media queries to optimize it.

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

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

这篇关于使用CSS在另一个周围定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！