0

我是否应该妥协 960px 网格以使部分完全流动/全宽？

我正在为其创建网站的人真的希望演讲部分的图像被裁剪（缩短），因此它将比其他 2 列短，除非所有 3 列都变宽。我只是将它们定义为 1/3 列骨架宽度。

在演讲部分有一种简单的方法可以做到：增加三列的宽度，从而使整个部分/行更宽（超过 960 像素）/跨整个屏幕，同时仍然由骨架网格定义。

（简单我的意思是对骨架 CSS 的最小操作。）

网址：http ://tinyurl.com/qbrjqne

<section>
    <h3 id='speaking'></h3>
    <div class="container">             
        <div class='one-third column'></div>
        <div class='one-third column'></div>
        <div class="one-third column">
            <section class='whitemission'>
            </section>
        </div>
    </div>
</section>

--- base/main style --- 

@media only screen and (max-width: 767px) and (min-width: 480px)
.container .one-third.column, .container .eight.columns, .container .four.columns {margin: 50px 0; padding: 45px 0;}

-- skeleton--
.container  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .one-third.column  { width: 300px; }
4

1 回答 1

0

一种简单的方法是将第一列设置为“六列”，将第二列和第三列设置为“五列”。然后图像会比文本列稍宽。也许这会更适合裁剪的图像。

但是，图像在 768 到 960 大小的网格中的拟合效果不如在 960 和更大的网格中。

为了解决这个问题，您可以显示不同的裁剪图像。如果那样就好了。我知道这会有点脏，但这很容易。;)

于 2014-07-07T14:35:20.190 回答