改善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

回答

相關問題