Question

您好我试图并排2 DIV

+--------------------------------+ +--------------------------------+
|                                | |                                |
|                                | |                                |
|            400px               | |            355px               |
|                                | |                                |
|                                | |                                |
|                                | |                                |
+--------------------------------+ +--------------------------------+

.header{
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}



.div1
{
    width: 400px;
    float: left;
    margin-right: 10px;
}


.div2
{

    width:355px;
}

我需要DIV能够清除标题，所以我不能使用绝对位置

我尝试了float left属性，但是当页面太小时，另一个div将在第一个div下面。我想知道是否有可能这样做。

编辑：当屏幕太小时，我希望水平条显示

Answer 1

Yes, it is possible:

<div class="outer">
    <div></div>
    <div></div>
</div>

.outer {
    overflow: hidden;
}
.outer div {
    float: left;
    width: 50%;
    height: 100px;
}

Answer 2

您可以在div上使用display:inline-block;，在父级上使用white-space: nowrap;。

.header div{
    display:inline-block;
    vertical-align:top;
}
.header{
    white-space: nowrap;
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}
.div1{
    width: 400px;
    margin-right: 10px;
}    
.div2{
    width:355px;
}

http://jsfiddle.net/mowglisanu/a6YNY/

Answer 3

如果您不希望元素浮动，则应使用表格（或两个并排）。首先，了解内联和块元素是什么。 div是块元素，span是内联元素。 div用作块元素。它被设计成一个块元素。除非另有说明，否则它应该具有全宽。 span是一个内联元素，它允许其他元素紧邻自身。你可以搜索“inline vs block html”获取更多信息

要查看滚动条，请设置这些元素的容器的溢出css属性以进行滚动。 http://www.w3schools.com/cssref/pr_pos_overflow.asp

即使页面太小，也可以并排放置2个DIV

3 个答案: