我想用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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句