Question

所以我正在制作一个带有浮动<li>的响应列表，我希望列表保留三列。但是，在调整窗口大小时，浮动项目（如同固定项目一样）被推入两列，而不是调整大小。这是我的代码示例：

HTML：

   <ul id="list">
       <li>item1</li>
       <li>item1</li>
       <li>item1</li>
       <li>item1</li>
       <li>item1</li>
       <li>item1</li>
    <ul>

的CSS：

#list{
 position: relative;
 width: 100%;
 display: block;
}

#list li{
 position: relative;
 width: 27%;
 float: left;
 margin: 2% 2% 0 0;
 display: block;
}

Answer 1

N列布局中％和maring / padding的问题是像素舍入。

如果您定义2％+ 2％+ 2％填充，如果没有舍入，则可能是20.4px+20.4px+20.4px=61.2px。但是通过舍入，它将给出20px+20px+20px=60px。

另外，不同的浏假设2％等于20.7px。有些浏览器可能会将其舍入为20px，其他浏览器则为21px。

如果需要合并％和一些边距/填充，可以使用内部元素。到目前为止，对于跨浏览器解决方案来说，这是最好的：

HTML：

   <ul id="list">
       <li><span>item1</span></li>
       <li><span>item1</span></li>
       <li><span>item1</span></li>
       <li><span>item1</span></li>
    <ul>

的CSS：

#list{
    position: relative;
    width: 100%;
    display: block;
}

#list li {
    width: 33.3%; /* nice 3 columns */
    float: left;
    padding: 0; /* should have zero paddng/margin */
    margin: 0;
}

#list li > span {
 margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
 display: block;
}

您可以为较小的屏幕尺寸指定两列：

@media only screen and (max-width: 800px) {
   #list li {
        width: 49.9%;
   }
}

使用浮动列表项进行响应式布局

1 个答案: