Question

所以，我有一个容器潜水，其中包含两个div。

#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>

Answer 2

<div>是块级元素，每个元素按定义开始一个新行。您可以使用style="display: inline"进行更改，也可以使用<span>代替<div>。

Answer 3

.content_third {
float:left; /*remove display:inline-block*/
width: 326px;
padding: 0 0 0 0;
border: none;
}

.content_two {
float:left; /*remove 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 style="clear:both"></div>    
        </div>

Answer 4

只需将其添加到div中的div：display: inline;。

工作小提琴：http://jsfiddle.net/7WFxA/

Answer 5

只需将float: left;添加到两个子DIV元素中即可。

CSS宽度问题

5 个答案: