1

私は一般的に CSS/グリッド レイアウトを初めて使用します。作成した 3 つの列を全幅のグリッド (16 列) の下に表示するのに問題があります。これを回避する唯一の方法は、最小高さを設定することです...

レイアウトは次のとおりです。

http://projects.upbeatdev.com/cats/ (ソースを表示するか、.text-overlay および .image から絶対位置を削除すると、想定どおりに 3 列のグリッドが表示されます)

このように見えるはずです

ヘッダー
16
列 1/3 列 1/3 列 1/3 列

以下のコードは、下部を参照してください。

<body>
    <div class="container">
        <section id="header" class="container">
            <div class="row">
                <div class="six columns">
                     <h1>ONE GOOD DEED TODAY.</h1>

                </div>
                <div class="seven columns">
                    <ul>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li class="last"><a href="#">ITEM</a>
                        </li>
                    </ul>
                    <form id="search">
                        <input type="input" name="search" value="search" />
                    </form>
                </div>
                <div class="three columns">
                    <div class="eight columns">
                        <div class="row">hello</div>
                        <div class="row">hello</div>
                    </div>
                    <div class="eight columns">
                        <div class="row">hello</div>
                        <div class="row">hello</div>
                    </div>
                </div>
            </div>
        </section>
        <section id="homepage" class="container">
            <div class="row">
                <div class="sixteen columns alpha omega">
                    <div class="text-overlay">
                         <h1>TITLE</h1>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt hendrerit enim at tristique. Aliquam purus sapien, eleifend imperdiet feugiat eu, consequat nec nisi. Phasellus condimentum urna a lacus consequat vestibulum. Curabitur vulputate nulla ac lacus pharetra iaculis. Nam et lectus nibh, sed pellentesque augue. Nulla ultricies vulputate mi eu tristique. Sed tellus leo, aliquam et iaculis a, tincidunt a neque. Sed congue sapien a erat dictum eget volutpat ligula interdum. Sed turpis dolor, tincidunt a tempus vitae, commodo et turpis. Nunc ultrices libero fringilla libero varius nec convallis ipsum convallis. Sed aliquam euismod felis, sit amet lobortis sem viverra non.</p>
                    </div>
                    <div class="image">
                        <img class="scale-with-grid" src="img/homepage-1.png" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="one-third column alpha omega">a</div>
                <div class="one-third column alpha omega">a</div>
                <div class="one-third column alpha omega">a</div>
            </div>
        </section>
    </div>
</body>

CSS:

section#header h1 {
    text-transform: uppercase;
    color:#000;
    font-size: 26px;
    font-weight: bold;
}
section#header ul li {
    display: inline;
    float: left;
    padding-right: 33px;
}
section#header ul li a {
    color:#000;
    text-decoration: none;
}
.last {
    margin-right: 0;
    padding-right: 0;
}
section#homepage .text-overlay {
    position: absolute;
    z-index: 1;
}
section#homepage .image {
    position: absolute;
}
4

2 に答える 2

0

ラッパー div の作成を検討することをお勧めします。

ここでの問題は、フロートが残っているために要素が競合していることです

.container .columns {
      float: left;
     }

グリッドに必要なブロック セクションの周りにラッパーを配置する場合は、構造を維持したままラッパー div を使用して、ラッパー内の要素に float:left を適用できます。したがって、各セクションのラッパー div は

#wrapper{
   display:block;
   width:100%;
   // plus any other code that you need
   // If you use .less you can very neatly add the other elements like so
   .seven columns{
     //style here
   }
}
于 2013-05-28T21:09:33.237 に答える