0

概要

我有一个包装器，宽度为 980 像素，填充为 10 倍。里面的内容是 960px (border-box)。我有一个元素，inline-block，宽度 760px，margin-right 20px，另一个 inline-block 为 180px。这些应该完美匹配。但仅从其中一个元素中减去两个 px 将使它们适合父元素。

我知道内联块的空白问题，并且总是使用该修复程序。即便如此，我仍然用浮动测试了两个块，仍然是同样的问题。

CSS

* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.wrapper { width: 980px; margin: 0 auto 20px; padding: 10px; border: 1px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.featured_blog { width: 760px; height: 240px; padding: 10px; margin: 0 20px 20px 0; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.featured_author { width: 180px; height: 240px; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; }

HTML

<section class="wrapper">
    <div class="featured_blog">
        <h2><span>Some Kind of Blog Title</span></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo orci, dictum id venenatis at, mattis nec enim. Maecenas vel molestie dolor. Maecenas mauris massa, congue at rhoncus et, dapibus sit amet eros. Nunc ipsum felis, eleifend in laoreet sit amet, tincidunt feugiat velit. Cras eu felis tortor, sed accumsan nisl. Ut volutpat viverra justo, quis consectetur felis tempor a. Etiam magna eros, euismod vel viverra in, facilisis sed libero. Vivamus in neque quis turpis adipiscing scelerisque dapibus at diam. Sed magna magna, ultrices quis posuere vel, pulvinar sodales dolor. Proin sapien sapien, adipiscing quis ultrices eget, cursus vitae enim. Maecenas ornare, erat non porta porta, sem felis condimentum erat, a lacinia nunc nisl a est.</p>
    </div><div class="featured_author"></div>
</section>

这两个px是哪里来的？？？！！！！！！

4

1 回答 1

1

2px来自border: 1px solid #000;. _ 两侧的边框会导致此问题。2px从宽度减小。

没有边界，它工作正常 http://jsfiddle.net/RRvMU/

带边框和一些宽度调整 http://jsfiddle.net/RRvMU/1/

于 2012-07-13T03:38:26.737 回答