Question

我有这些html标签

<div class="items-row cols-3 row-0">
  <div class="item column-1"></div>
  <div class="item column-2"></div>
  <div class="item column-3"></div>
</div>
<div class="items-row cols-3 row-1">
  <div class="item column-1"></div>
  <div class="item column-2"></div>
  <div class="item column-3"></div>
</div>
<div class="items-row cols-3 row-2">
  <div class="item column-1"></div>
  <div class="item column-2"></div>
  <div class="item column-3"></div>
</div>

我想要向左漂移

.items-row{float: left;} /*tried !important also*/

test site

但这不应该向左浮动。如果这是宽度问题，这里是demo，其中主div宽度无论如何都要小但是向左浮动。

Answer 1

我认为您应该关闭<div>代码！

请参阅fiddle。

<强> HTML：

<div class="items-row cols-3 row-0">
    <div class="item column-1">1</div>
    <div class="item column-2">2</div>
    <div class="item column-3">3</div>
</div>
<div class="items-row cols-3 row-1">
    <div class="item column-1">1</div>
    <div class="item column-2">2</div>
    <div class="item column-3">3</div>
</div>
<div class="items-row cols-3 row-2">
  <div class="item column-1">1</div>
  <div class="item column-2">2</div>
  <div class="item column-3">3</div>
</div>

Answer 2

因为我假设你做错了我调试它并找到了

用你的css替换这个css，这将有效

.item {
    display: block;
    float: left;
    padding: 0 5px 10px;
}

选中此fiddle

<强>更新

将此css替换为您的CSS，它将起作用

.items-row {
    width: 33.33%;
    float: left;
}
.item {
    margin:0 !important;  
}
.column-1, .column-2, .column-3 {
    /*width: 55%; remove width  */
}

更重要的是，请删除您多次选择它们的所有.column-选择器，以确保css仅应用一次

Answer 3

请尝试以下代码

<div class="items-row cols-3 row-0">
   <div class="item column-1"></div>
   <div class="item column-2"></div>
   <div class="item column-3"></div>
</div>
<div class="items-row cols-3 row-1">
   <div class="item column-1"></div>
   <div class="item column-2"></div>
   <div class="item column-3"></div>
</div>
<div class="items-row cols-3 row-2">
   <div class="item column-1"></div>
   <div class="item column-2"></div>
   <div class="item column-3"></div>
</div>

请在下面替换css。我设置了div宽度，因为float属性适用于宽度。

 .items-row{float:left; width:200px;}

向左浮动不能正常工作

3 个答案: