0

あらすじ

私はラッパーを持っています、幅980px、パディング10x。中身は960px（ボーダーボックス）です。1つの要素、インラインブロック、幅760ピクセル、マージン右20ピクセル、および180ピクセルの別のインラインブロックがあります。これらは完全に一致する必要があります。ただし、要素の1つから2 pxを引くだけで、それらは親内に収まります。

インラインブロックの空白の問題を認識しており、常にその修正を使用しています。それでも、フロートを使用して2つのブロックをテストしましたが、同じ問題が発生しました。

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>

これらの2つのピクセルはどこから来ていますか???!!!!!

4

1 に答える 1

1

は2pxから来ていborder: 1px solid #000;ます。どちらかの側のボーダーがこの問題を引き起こします。2px幅から減らします。

ボーダーがなければ、問題なく動作します http://jsfiddle.net/RRvMU/

Border あり、およびいくつかの幅調整 http://jsfiddle.net/RRvMU/1/

于 2012-07-13T03:38:26.737 に答える