欧米茄元素的宽度是否不同？ [英] Omega if elements have different widths?

问题描述

如果元素的
宽度不同， Susy 是否可以自动填充多列布局？ / strong>

我想要（请参见下面的代码）：

  + --------- + --------- + --------- + 
 |我想要|这个
 + --------- + --------- + --------- + 
 |填充自动！ | 
 + --------- + ------------------- + 
  

我得到的（请参见下面的代码）：

  + --------- + --------- + --------- + 
 |我想要| | 
 + --------- + --------- + --------- + 
 |这个填充| 
 + --------- + --------- + --------- + 
 |自动！ | | 
 + --------- + --------- + --------- + 
  

目的？对于响应式布局，对于较小的屏幕（媒体查询断点），应该可以切换到两个
列：

  + --------- + --------- + 
 |我想要| 
 + --------- + --------- + 
 |这个填充
 + --------- + --------- + 
 |自动！ | 
 + ------------------- + 
  

这可以简单地通过让所有元素向左浮动来实现。
但是，我想使用Susy之类的东西来降低复杂性。

HTML：

 < div id = container> 
< div class = one> I< / div> 
< div class = one> want< / div> 
< div class = one> this< / div> 
< div class = one> filled< / div> 
< div class = two>自动< / div> 
< / div> 
  

SCSS，没有Omega并且不起作用：

< pre class = lang-css prettyprint-override> @import'susy';

总列数：3；
$ column-width：200px;
$ gutter-width：5px;
$ grid-padding：10px;

＃容器{
@include容器；
@include susy-grid-background;

&÷ div {
高度：50像素；
}

&> div.one {
@include span-columns（1）;
}

& gt; div.two {
@include span-columns（2）;
背景：黄色；
}
}


解决方案

Susy具有 at-breakpoint（）混合函数，用于在不同的媒体查询断点处建立不同的列数。但是不，您不能自动。

Can Susy automatically fill a multi column layout if elements have different widths?

What I want (see code below):

+---------+---------+---------+
| I       | want    | this    |
+---------+---------+---------+
| filled  | automatically!    |
+---------+-------------------+

What I get (see code below):

+---------+---------+---------+
| I       | want    |         |
+---------+---------+---------+
| this    | filled  |         |
+---------+---------+---------+
| automatically!    |         |
+---------+---------+---------+

Purpose? For a responsive layout, it should be possible to switch to two columns for smaller screens (media query breakpoint):

+---------+---------+
| I       | want    |
+---------+---------+
| this    | filled  |
+---------+---------+
| automatically!    |
+-------------------+

This can be implemented simply by letting all elements float left. However, I would like to use something like Susy to reduce complexity.

HTML:

<div id="container">
  <div class="one">I</div>
  <div class="one">want</div>
  <div class="one">this</div>
  <div class="one">filled</div>
  <div class="two">automatically</div>
</div>

SCSS, without Omega and not working:

@import 'susy';

$total-columns: 3;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;

#container {
    @include container;
    @include susy-grid-background;

    &>div {
        height: 50px;
    }

    &>div.one {
        @include span-columns(1);
    }

    &>div.two {
        @include span-columns(2);
        background: yellow;
    }
}

解决方案

Susy has the at-breakpoint() mixin for establishing different column-counts at different media-query breakpoints. But no, you can't do it automatically.

这篇关于欧米茄元素的宽度是否不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！