Question

概要

我有一个包装，宽度980px，填充10x。里面的内容是960px（边框）。我有一个元素，内联块，宽度760px，边距右20px，另一个内联块，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来自哪里??? !!!!!

Answer 1

2px来自border: 1px solid #000;。任何一方的边界都会导致这个问题。从宽度减少2px。

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

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

使用box-sizing：border-box在布局中仍然缺少2px

1 个答案: