html - CSS 宽度问题

Question

因此，我有一个包含两个 div 的容器 dive。

#main_container {
margin: 0 auto;
width: 980px;
padding: 0 0 0 0;
border: none;
}
    .content_third {
    display: inline-block;
    width: 326px;
    padding: 0 0 0 0;
    border: none;
    }

    .content_two {
    display: inline-block;
    width: 653px;
    vertical-align: top;
    padding: 0 0 0 0;
    border: none;
    }




<div id="main_container">
            <div class="content_third">
            hello world!

            </div>
            <div class="content_two">
            Hello World!
            </div>
        </div>

div 垂直堆叠，而不是像我需要的那样水平排列。宽度加起来 (326px + 653px = 979px) 所以我不明白为什么它们不能正确排列。知道这里发生了什么吗？

Answer 1

查看 HTML 会有所帮助，但最好的猜测是你有这样的东西:

<div class="content_third">
    foo
</div>
<div class="content_two">
    bar
</div>

因为两个div都有display: inline-block;，div之间的空白就变得有意义了，也就是在它们之间加了一个空格字符。更改 HTML，使 div 之间完全没有空格(换行符、空格):

<div class="content_third">
    foo
</div><div class="content_two">
    bar
</div>