Question

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

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

在发言部分，有一个 easy 方式来制作：增加三列的宽度，从而使整个屏幕上的整个部分/行更宽（超过960像素）/跨度，同时仍由骨架网格定义。

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

<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; }

Answer 1

一种简单的方法是将第一列设置为＆＃34;六列＆＃34;以及第二和第三列＆＃34;五列＆＃34;。然后图像将比文本列略宽。也许这会对裁剪的图像更好一点。

但是这样的图像也不适合768到960大小的网格，就像它在960大小的网格中一样。

要解决此问题，您可以显示不同裁剪的图像。如果那样没关系。我知道它会有点脏，但它很容易。 ;）

减少骨架网格的边距

1 个答案: