使用CSS将元素定位在另一个元素周围

马科斯·利马(Marcos Lima)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用CSS将元素定位在另一个对象的前面

CSS定位:如何将图块/段落定位在另一个下

无论项目的高度如何,如何将元素一个定位在另一个位置?

使用CSS / HTML将一个元素移到另一个元素之前

CSS::将鼠标悬停在元素上并定位另一个

如何使用jQuery将一个元素相对于另一个元素定位?

如何将一个元素定位到另一个元素的左侧?

如何使用jQuery在另一个HTML元素周围添加HTML元素

如何使用css / Extjs将元素悬停在另一个元素上

使用CSS将元素放置在另一个元素上

定位特定元素,如果它只包含另一个带有 CSS 的元素

将绝对定位的元素水平居中放置在另一个元素的中心之下

如何使用jQuery定位另一个元素中的元素

如何使用jQuery定位嵌套在另一个元素的同级标签中的元素

如何使用XPATH定位其中包含另一个元素的元素?

在特定位置将一个向量的元素替换为另一个向量的元素

如何将元素从顶部定位到固定位置,直到被另一个元素推动

使用CSS单击另一个元素时如何显示一个元素?

如何将JFrame永久定位在另一个之上?

将 flex div 动态定位在另一个 div 下方

将一个元素放置在另一个元素上时,我是否可以正确使用绝对定位?

如何通过Javascript定位另一个元素

使用来自另一个元素的选择器定位一个元素

如何使用PHP将数组元素推到另一个数组中的特定位置

无法将ul元素定位到另一个div的右侧

如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围?

Javascript /根据另一个元素的位置定位一个元素

围绕另一个元素旋转元素-CSS

使用 CSS 将元素定位在对面