Zurb 基金会 div 对齐问题答案

【问题标题】：Zurb foundation div align issueZurb 基金会 div 对齐问题
【发布时间】：2013-08-25 12:35:50
【问题描述】：

我正在使用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 会自动移动，如果第 2 个 div 是 display:none

【问题讨论】：

标签： css html zurb-foundation

【解决方案1】：

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

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

但是，根据您这样做的原因以及这是否只适用于台式机/平板电脑/移动设备或所有三个，您可能希望使用 @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>

【讨论】：

【解决方案2】：

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

.abc{

    float:left !important;  
}

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

【讨论】：

【解决方案3】：

试试这个fiddle

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

【讨论】：

对不起，但它没有用，如果 div 没有使用 zurb，那么这工作正常，但使用 zurb 我仍然面临同样的问题，使用 'float:right' 空间得到删除，并在末尾创建空白空间

【解决方案4】：

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

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

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

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

到

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

【讨论】：