Css ZURB基金会分立发行 我使用ZURB基金会来建立网站，但现在我面临的问题如下：

一行中有四列，其中一列有时不可见。根据某些条件，代码为

<div class="row">
    <div class="small-3 columns">1 ... </div>
    <div class="small-3 columns" style="display:none;">2 ... </div>
    <div class="small-3 columns">3 ... </div>
    <div class="small-3 columns">4 ... </div>
</div>

1.
2.
3.
4.

现在的问题是，当div被禁用时，它们之间的空白应该被其他div使用，但在我的情况下，这种情况不会发生， 我知道，我错过了一个小要点，但我得不到 这是问题的表象 我需要将第四个div向左移动，因为第三个div会自动移动，如果第二个div是

display:none

试试这个

HTML

ZURB基金会（看起来您正在使用版本4）在默认情况下不是这样工作的

我通常做的是创建一个

.left{float:left！important；}

类。如果你把它应用到你的第四个div，那么它会按照你说的做

但是，根据您这样做的原因，以及这是否仅适用于台式机/平板电脑/移动设备或所有三种设备，您可能需要使用

@media

在样式表中查询以指定位置和时间

示例：

@media (query goes here) {
 .row .columns:last-child {
  float: left; 
 }
}

**或**

.left {
 float: left !important;
}

然后

1.
2.
3.
4.

@jnelson谢谢你的帮助，现在我意识到了！很重要，所以我创建了一个简单的解决方案

.abc{

    float:left !important;  
}

---

这也适用于所有类型的设备

您不应该更改列大小或工作方式的基本结构

相反，您应该只使用不同的类。如果您知道一列将被禁用，我假设您正在使用javascript来实现这一点。然后还可以使用javascript添加适当的列宽。如果有3列而不是4列（由于其中一列显示为“无”），则为这三列指定一个

small-4

。这种思路还允许您处理两列（

small-6

）

如果你一定要使用3列，我同意上面的帖子，你需要改变

[class*="column"]+[class*="column"]:last-child {
float: right;

到

---

很抱歉，但它不起作用，如果在没有zurb的情况下使用div，那么这很好，但是使用zurb，我仍然面临同样的问题，使用“float:right”会删除空格，并在末尾创建空白

   <div class="row">
     <div class="small-3 columns">1 ... </div>
     <div class="small-3 columns" style="display:none;">2 ... </div>
     <div class="small-3 columns">3 ... </div>
     <div class="small-3 columns left">4 ... </div>
   </div>

.abc{

    float:left !important;  
}

[class*="column"]+[class*="column"]:last-child {
float: right;

[class*="column"]+[class*="column"]:last-child {
float: left;