1

我正在将我的网站从固定布局转换为响应式布局并使用 getskeleton 框架。http://jsfiddle.net/L2q750xw/1/

 <div class="one-third column">

    <h4>Basic Page</h4>
     <div class="home-box-wrap"><img class="u-max-full-width" src="http://www.aroundtheworldin80jobs.com/wp-content/uploads/2013/09/2013-berlin.jpg"></div>

    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton    documentation</a>.</p>
  </div>
</div>


}.home-box-wrap{
width:100%;
height:0%;
 border:2px solid #ff00ff;
 border-radius: 5px;
 padding:0px;
 }
.u-max-full-width {
 max-width: 100%;
 box-sizing: border-box; }

除了图像下方的空白之外，所有工作都按预期工作，我看不出这是什么原因，并尝试删除填充并调整框高度，它应该都被规范化。

谢谢

4

3 回答 3

3

你基本上有两个选择。

vertical-align将元素的属性更改为img默认值以外的其他值baseline：

更新示例

.u-max-full-width {
    vertical-align: top;
    max-width: 100%;
    box-sizing: border-box;
}

在某些情况下，您还可以display将img元素的值从默认值更改inline为block。

更新示例

.u-max-full-width {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

至于为什么会这样：

为超出其他字母高度的字母（例如 f、j、p 和 q）inline的元素保留空白。通过将元素的属性更改为默认值以外的其他值，空白将被删除。通过将元素的 更改为，该属性不再对元素产生影响，因为它不再是。vertical-alignbaselinedisplayblockvertical-aligninline

于 2015-02-21T16:43:47.993 回答
1

@JoshCrozier 有一个不错的出路！但我想添加一个厚颜无耻的技巧来帮助你。margin-bottom只需为您的所有img元素添加负数。

img{
    margin-bottom:-7px;
}

工作小提琴：http: //jsfiddle.net/L2q750xw/3/

于 2015-02-21T16:46:42.000 回答
0

正在显示图像inline，因此您的 padding:0 规则没有得到应用。使其成为块/内联块级元素

.home-box-wrap img  { display:block }
于 2015-02-21T16:49:32.383 回答