改善div对齐

目标是将两个div彼此对齐。改善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之下。

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

来源

2012-05-13 Eleeist

[把两个灵活的div彼此相邻]可能的重复（http://stackoverflow.com/questions/10571401/putting-two-flexible-divs-next-to-each-other） – sandeep

将它们包含在一个包含div的div中，并给出包含div的像素固定宽度。一旦浏览器窗口变得小于该宽度，它将显示滚动条。

来源

2012-05-13 13:03:35

你应该包装那些的div，并设置包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宽度。

来源

2012-05-13 13:14:15 Zuul

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

来源

2012-05-13 13:14:21 Playmaker

整点这是为了避免表格。如果我想使用它们，我可以将文本放在相邻的单元格中。 – Eleeist

回答

相关问题