0

I have these html tags

<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>

And I wanted to float left as this

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

test site

but this is not floating to left as it should. If this is width problem here is a demo of which main div width is smaller anyway but floating to left.

4

3 回答 3

2

我认为你应该关闭你的<div>标签！

见小提琴。

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>
于 2013-07-05T11:12:29.777 回答
1

正如我假设你做错了我调试它并发现

用你的 css 替换这个 css 就可以了

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

检查这个小提琴

更新

将此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 仅将其应用一次

于 2013-07-05T11:14:02.993 回答
0

请尝试以下代码

<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 宽度，因为浮动属性适用于宽度。

 .items-row{float:left; width:200px;}
于 2013-07-05T11:25:33.170 回答