2

スージーでサイトをモックアップしようと必死になっています。明らかな何かが欠けているのではないかと心配していますが、Susyグリッドにアイテムをネストすると、各列のパーセンテージの幅とマージンがわずかにオーバーシュートし、合計が100％を超えて次の行に折り返されるように見えます。次の例では、＃main_headernavは12列のうち8列にまたがるように設定されており、その中の各liは8列のうち2列を満たす必要があります。各liには、以下のように計算されたスタイルがあり、合計で100％を超え、最後のアイテムが折り返されます。

width: 22.58065%;
float: left;
margin-right: 3.22581%;

これは問題のある例です：

<header id="main_header">
    <img id="main_banner" src="images/test_banner.png" alt="Test">
    <nav id="main_headernav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#shop">Shop</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>          
</header>

そしてSASS：

$total-columns  : 12;           
$column-width   : 60px;           
$gutter-width   : 20px;  
$grid-padding   : $gutter-width;

//Set border-box sizing - also alters SUSY grid math
//@include border-box-sizing;

// Main Container
#main_container {
    @include container;
}

#main_header {
    @include span-columns(12 omega);

    #main_banner {
        @include span-columns(12 omega,12);
    }

    #main_headernav {
        @include span-columns(8 omega,12);

        li {
            @include span-columns(2,8);
        }
    }
}
4

1 に答える 1

2

わかりましたので、それが私の問題になることはわかっていました:)

もちろん、不要なマージンを回避し、ラッピングを防ぐために、4 番目の li 子ごとに n 番目のオメガ mixin を使用する必要があります。

そして、同じ画面を見つめるのに2時間しかかかりませんでした:)

于 2012-09-23T20:40:01.543 に答える