1

我正在使用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>

现在的问题是当 div 被禁用时，它们之间的空白空间应该被其他 div 使用，但在我的情况下并没有发生，我知道，我遗漏了小点，但在这里无法得到它是问题的图像我需要将第 4 个 div 向左移动，因为第 3 个 div 会自动移动，如果 2nd div 是display:none

在此处输入图像描述

4

4 回答 4

1

ZURB-Foundation（看起来您使用的是版本 4）默认情况下不能这样工作。

我通常做的是创建一个.left {float: left !important;}类。如果你把它应用到你的第 4 个 div 那么它会按照你说的那样做。

但是，根据您这样做的原因以及这是否仅适用于 DESKTOP/TABLET/MOBILE 或所有三个，您可能希望 @media在样式表中使用查询来指定何时何地。

例子：

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

** 或者 **

.left {
 float: left !important;
}

然后

   <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>
于 2013-08-25T12:48:51.753 回答
1

@jnelson 感谢您的帮助，现在我意识到了 !important 的强大功能，因此我创建了简单的解决方案

.abc{

    float:left !important;  
}

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

于 2013-08-25T12:55:21.273 回答
0

试试这个小提琴

HTML

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

CSS

div.columns
{
    padding:10px;
    background:#00bfff;
    width:20%;
    display:block;
    float:left;
}
于 2013-08-25T12:45:40.193 回答
0

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

相反，您应该只使用不同的类。如果您知道一列将被禁用，并且我假设您正在使用 javascript 来执行此操作。然后还使用 javascript 添加适当的列宽。如果您有 3 列而不是 4 列（由于一列不显示），请给出三列 a small-4。这种思路还允许您处理两列 ( small-6)。

如果您绝对必须使用 3 列，我同意您需要更改的上述帖子。

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

至

[class*="column"]+[class*="column"]:last-child {
float: left;
于 2013-08-26T10:58:37.817 回答