Question

目标是将两个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下面。

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

Answer 1

将它们包含在包含div中，并将包含div的内容赋予固定宽度（以像素为单位）。浏览器窗口小于该宽度后，将显示滚动条。

Answer 2

你应该包装那些 divs ，并将wrap width设置为等于所有孩子width的总和：

请参阅此Fiddle Example!

<强> 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;
}

<强> JQUERY

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

这样做的目的是收集#wrap的每个第一个孩子的内容，并将它们加在一起，将其设置为#wrap的宽度。

Answer 3

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

改善div对齐

3 个答案: