HTMLページの折りたたみ式Divのアラインメント

StackOverflow https://stackoverflow.com/questions/6817642

質問

誰かが折りたたみやすいのを手伝ってくれることを願っています div タグ。

私がやりたいのは、複数の折りたたみ可能な2列セクションを持つリストを作成することです。セクションはで設計されています div タグとリストに埋め込まれています。

私のコードはこれまでのところIEで動作しますが、FirefoxやChromeでは機能しません。後者の2つでは、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>

どんな助けも感謝しています。

役に立ちましたか？

解決

私があなたの問題を正しく理解しているなら、あなたはあなたの言葉をクリアする必要があります。参照については、このフィドルを参照してください。 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;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top