如何让图像跨越3列网格上的div的100％？

对不起noob问题。如何让图像跨越3列网格上的div的100％？

我有一个1200px宽的网格。我有一个跨越1200像素的3列。我知道问题是网格的作品，跨越1200像素，但图像不匹配。我希望他们能够全屏1200px。我尝试将图像1对齐左侧，图像3右侧和中心图像对齐中心，但看起来像唯一移动的是左侧，在中间留下更大的空间，因此它们不是等间距的。

我创建了的jsfiddle http://jsfiddle.net/sn7ojvLt/

<div class="grid"> 
    <div class="row"> 
    <div class="col-12"> 
     <img src="http://www.placehold.it/1200x50" alt="middle image"> 
    </div> 
    </div> 
    <div class="row"> 
    </div> 
    <div class="row"> 
    <div class="col-4"> 
     <img src="http://www.placehold.it/380x230" alt="featured works"> 
    </div> 

    <div class="col-4"> 
     <img src="http://www.placehold.it/380x230" alt="featured works"> 
    </div> 

    <div class="col-4"> 
     <img src="http://www.placehold.it/380x230" alt="featured works"> 
    </div> 
    </div>

来源

2014-10-08 Dekard

是这样的？ http://jsfiddle.net/sn7ojvLt/1/ – Austin 2014-10-08 23:10:20

你需要明确设置你的图像的宽度，我的例子。如果将它们设置为width: 100%，则它们将填满整列而不会失真。

http://jsfiddle.net/sn7ojvLt/2/

来源

2014-10-08 23:11:32

谢谢，这是我想要的，但如果我添加一个边距或填充，他们不会再对齐在右侧或左侧。我试图拥有像10px的填充，但左边的图像与网格左侧齐平，右侧图像位于网格右侧，中间图像位于两者之间。 – Dekard 2014-10-08 23:36:43

我会用一个表做的，而不是div的这一点。要使单元格跨度超过一列，请使用colspan属性。见下面的例子。

<table style='width:100%'> 
    <tr> 
    <th>Name</th> 
    <th colspan="2">Telephone</th> 
    </tr> 
    <tr> 
    <td>Bill Gates</td> 
    <td>555 77 854</td> 
    <td>555 77 855</td> 
    </tr> 
</table>

来源

2014-10-08 23:18:43 lillix

你的标记本质上是一张表，但这不是一个现代的方式来做到这一点。我会简化你的标记，然后在布局方面你有更多的选择 - 例如，如果你想做一个移动版本 - 再加上它更容易阅读和理解。

<div class="grid"> 
    <div class="main">main image</div> 
    <div class="feature">feature 1</div> 
    <div class="feature">feature 2</div> 
    <div class="feature">feature 3</div> 
</div>

然后，我会为您的网格，主要和功能div有以下CSS类。我在一些颜色加入只是让你可以看到块坐在页面上 - 你可以忽略那些真正：

.grid { 
    overflow: auto; 
    width: 1250px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    background: lightblue; 
} 
.main { 
    width: 100%; 
    height: 50px; 
    background: orange; 
} 
.feature { 
    float: left; 
    width: 33.333%; 
    height: 230px; 
    box-sizing: border-box; 
    background: magenta; 
} 
.feature:nth-child(3) { background: pink; }

在这个例子中，我们已经指定你的容器 - 这可能是任何大小 - 100％一个页面的宽度会使你的布局变得灵活。主图像是该宽度的100％和50px高。

然后我们有3个功能div。每一个都是容器宽度的三分之一，高度为230像素。我已经使用浮动属性坐在他们相邻的位置。但是，如果浮动项目，则它们会从容器流中退出，因此您的容器将不会继承功能框的高度。要解决此问题，请将overflow属性设置为auto。我已经添加了容器填充，只是为了向您显示该框的大小，因为您可以看到它是浅蓝色背景。

nth-child CSS可以忽略 - 它只是在那里改变中间特征的背景颜色，所以你可以清楚地看到边界。

如果您想为功能框添加一些空间，您可以将框尺寸属性设置为“边框” - 因此添加边框不会增加框的宽度。

来源

2014-10-08 23:34:43

如何让图像跨越3列网格上的div的100％？

回答

相关问题