0

目标是对齐两个相邻的 div。

HTML：

<div class="test1>Text 1</div>
<div class="test2>Text 2</div>

CSS：

.test1 {
    float: left;
}
.test2 {
    float: left;
}

只要浏览器窗口比两个 div 宽，它就可以工作。当浏览器窗口宽度不能再容纳两个相邻的 div 时，test2 被推到 test1 下方。

如何防止这种行为？因此它们将始终彼此相邻（如果它们的总宽度大于浏览器宽度，则显示水平滚动条？）。

4

3 回答 3

3

将它们包装在包含 div 中，并为包含 div 的内容提供固定宽度（以像素为单位）。一旦浏览器窗口变得小于该宽度，它将显示滚动条。

于 2012-05-13T13:03:35.970 回答
1

您应该包装这些div，并将包装设置为width等于所有孩子的总和width：

请参阅此小提琴示例！

HTML

<body>
    <div id="wrap" class="clearfix">
        <div class="test1 floatL">Div 01</div>
        <div class="test2 floatL">Div 02</div>
    </div>
</body>

CSS

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.floatL {
    float: left;
}
.test1 {
    width: 500px;
    height: 50px;
    background-color: #D9D9D9;
}

.test2 {
    width: 700px;
    height: 30px;
    background-color: #CCC;
}


/* helpers */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

查询

$(function() {
    var sum=0;
    $('#wrap > div').each( function(){ sum += $(this).width(); });
    $('#wrap').width( sum );
});

这样做的目的是收集 的每个第一个孩子的with#wrap并将其加起来设置为 的宽度#wrap。

于 2012-05-13T13:14:15.253 回答
0

您可以做的是创建一个表格并将 div 放入其中。这样它就不会溢出到下一行。

于 2012-05-13T13:14:21.830 回答