1

各位晚上好，

我有一个关于使用 960.gs 嵌套网格和响应式网页设计的问题。目前，我使用嵌套网格以及 Alpha 和 Omega 类，将左侧 (alpha) 和右侧 (omega) 边距重置为 0。现在这是硬编码的。我的网格结构如下：

 <div class="grid_8">
  <ul class="recentbox">

       <li class="grid_4 projectbox alpha">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->



       <li class="grid_4 projectbox">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->



       <li class="grid_4 projectbox omega">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->

   </ul> <! - End ul ->

我的网站有 3 列布局。现在的问题是我想让我的网站响应。对于我的 iPad，我设计的不是 3 列，而是 2。当我使容器具有适当的宽度（对于 iPad）时，第一个 div 底部的最后一个 div（带有额外的类 omega）要站立，使这个 div 错误财产。完全 Sighted 类 alpha 和 omega 在代码中是硬编码的，更改不接受它们。上面示例中的中间 div 实际上必须获取 omega 类和最后一个 div（现在处于第一个条件下），应该获取 alpha 类。

我想要具有响应式媒体查询的站点，我的问题是，我该如何做才能使 alpha 和 omega 能够适应网格，或者我如何在没有课程的情况下做到这一点？

已经谢谢你了！

格雷茨，卡斯帕 B

PS：对不起我的英语不是我的母语。

4

0 回答 0