Question

我希望有人可以帮助我使用可折叠的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>

感谢任何帮助。

Answer 1

如果我正确理解你的问题，你需要清除你的措辞。请参阅此小提琴以供参考：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;
}

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

1 个答案: