HTML 页面中可折叠 div 的对齐方式答案

【问题标题】：Alignment of Collapsible div's in an HTML pageHTML 页面中可折叠 div 的对齐方式
【发布时间】：2011-07-25 14:26:33
【问题描述】：

我希望有人可以帮助我处理可折叠的div 标签。

我想做的是创建一个包含多个可折叠 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>

感谢任何帮助。

【问题讨论】：

标签： css list layout html expandable

【解决方案1】：

如果我正确理解了您的问题，您需要清除您的冗长 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;
}

【讨论】：