可摺疊div在HTML頁面中的對齊

我希望有人可以幫我用可摺疊div標籤。可摺疊div在HTML頁面中的對齊

我想要做的是創建一個包含多個可摺疊2列部分的列表。這些部分用div標籤設計並嵌入列表中。

我的代碼到目前爲止在IE瀏覽器，但不是在Firefox或Chrome。在後兩種情況下，擴展2列樣本時，列表項向右移動。

下面的代碼重現了這個問題。如果您在Mozilla或Chrome中打開它，並在第一個示例項中單擊[ ]，則下面示例的項目符號項將移動到右側。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title></title> 
<script src="jquery-1.4.4.js"></script> 
<style type="text/css"> 
div.sample { 
position:relative; 
left:0px; 
} 
div.item { 
position:relative; 
display:none; 
width:600px; 
left:10px; 
text-align:justify; 
} 

div.ltcol{ 
float:left; 
width:45%; 
} 

div.rtcol{ 
float:right; 
width:45%; 
} 

</style> 

</head> 

<body> 

<ul> 
<li><div id="sample1" class="sample">Sample <a href="#" OnClick="showone('verbiage1');">[&nbsp;]</a> 
<div id="verbiage1" class="item"> 
<div id="source" class="ltcol"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
<div id="target" class="rtcol"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
</div></div></li> 

<li><div id="sample2" class="sample">Sample <a href="#" OnClick="showone('verbiage2');">[&nbsp;]</a> 
<div id="verbiage2" class="item"> 
<div id="source" class="ltcol"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
<div id="target" class="rtcol"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
</div></div></li> 

<script> 
//Quick and dirty javascript to get it up and running. 
alldivs=['verbiage1','verbiage2']; 

function showone(name) { 
divname="#".concat(name); 
for (var i in alldivs){ 
if ("#".concat(alldivs[i])==divname){ 
    $(("#".concat(alldivs[i]))).toggle(200); 
    } 
    else{ 
     $(("#".concat(alldivs[i]))).hide(200); 
    } 
} 
    return true; 
}; 

</script> 

</body> 
</html>

任何幫助表示讚賞。

來源

2011-07-25 Paulo Mendes

如果我正確理解你的問題，你需要清除你的verbiage div。看這個小提琴以供參考：http://jsfiddle.net/Ujw5b/

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
    overflow: visible; 
}

來源

2011-07-25 14:49:21 Jesse

可摺疊div在HTML頁面中的對齊

回答

相關問題