html - 像这里的图片一样获取一个无序列表来环绕

Question

我需要创建一个模仿下图模型的部分

因为我使用的是内容管理系统，所以我只能控制该部分中元素的 CSS。因此，举例来说，我不能将 ul 分成 2 个 ul 在单独的 div 中(不使用一些花哨的 JavaScript hack)。

基本上我需要处理的是

<div class="outer">
   <div class="inner-left">
       <!-- left content injected here by the CMS -->
   </div>
   <div class="inner-right">
         <!-- list content injected below by the CMS -->
         <ul></ul> 
   </div>
</div>

您是否知道实现所需行为的简单方法？

Answer 1

你可以用一堆 float 来完成这个。

.inner-left {
    float: left;
    width: 33.33%; // the first column width
}
.inner-right{
    float: left;
    width: 66.66%; // the container of the next 2 columns
}

然后我们让 ul 创建接下来的 2 列，但首先您需要通过删除边距和填充来重置 ul，然后 float li 并给它们设置 50% 的宽度；

.inner-right ul {
    padding: 0;
    margin: 0;
}

.inner-right ul li {
    float: left;
    width: 50%;
}

这应该给你 3 个均匀间隔的列。