0

ほぼ同じコードのページが2つあります。どちらにもこのCSSコードと2つのdivがあります。

<style type="text/css">
.visfarve { position:relative; float:left; padding:5px; border:1px solid #666; }
.farver { border:1px solid black; width:75px; height:10px; }
.valgtfarve { width:95px; height:15px; display:block; background-color:white; text-align:center; }
</style>

<div id="vis" style="display:block; font-size:11px;">
  <a href="javascript:colors(1);">Vis farver</a>
</div>
<div id="skjul" style="display:none; font-size:11px;">
  <a href="javascript:colors(0);">Skjul farver</a>
</div>

1ページには、次の構成があります。

<table style="width:730px;">
  <tr>
    <td width="510px">
      <div id="visfarve" style="display:none; margin-top:11px;">&npsp;</div>
    </td>
    <td id="viser" style="border-radius:10px; width:220px; height:inherit"></td>
  </tr>
</table>

他のページにはこの障害があります：

<div id="visfarve" style="display:none; margin-top:11px;">&nbsp;</div>
<div id="viser" style="margin-top:50px; border-radius:10px; display:none;">&nbsp;</div>

これらは、次の2つのjs関数を共有します。

var farve1 = ["3D3D34","463834","3F383D","433839","333F44","3B3B40","38413D","304344","483C33","313F48","37463B","35453F"];
var farve2 = ["S8505-Y20R","7812-Y87R","S8010-R30B","S8010-R10B","8108-R93B","8207-R38B","S8502-G","S8010-B30G","S8010-Y70R","S8010-R90B","S8010-G10Y","S8010-B90G"];

function colors(vis) {
  var setheight = 0;
  for(i=farve1.length-1;i>-1;i--) { skriv += "<div class='visfarve' onmouseover=\"document.getElementById('viser').style.background = '#" + farve1[i] + "';\" onmouseout=\"document.getElementById('viser').style.background = 'white';\" onclick='valgtfarve(\"" + farve2[i] + "\",\"#" + farve1[i] + "\");'><table><tr><td class='farver' title='Klik for at vælge' style='background-color:#" + farve1[i] + ";'></td></tr><tr><td><p>" + farve2[i] + "</p></td></tr></table></div>"; setheight += 10; }
  document.getElementById('visfarve').innerHTML = skriv;

  if(vis) { 
    document.getElementById('vis').style.display = "none";
    document.getElementById('skjul').style.display = "block"; 
    document.getElementById('visfarve').style.display = "block";
    document.getElementById('viser').style.display = "block";
    document.getElementById('viser').style.height = setheight + "px";
  }
  else {
    document.getElementById('vis').style.display = "block";
    document.getElementById('skjul').style.display = "none";
    document.getElementById('visfarve').style.display = "none";
    document.getElementById('viser').style.display = "none";
    document.getElementById('viser').style.height = 0 + "px";
  }
}

function valgtfarve(kode, farve) {
  if(!valgt) { 
    if(confirm("Tones en maling kan den ikke returneres.\nAccepter fraskrivelse af returret for tonet maling?")) { valgt = true; } 
    else {
      document.getElementById('vis').style.display = "block";
      document.getElementById('skjul').style.display = "none";
      document.getElementById('viser').style.height = "0px";
      document.getElementById('visfarve').style.display = "none"; return false;
    }}
  document.getElementById('valgtfarve').value = kode;
  document.getElementById('valgtfarve').style.backgroundColor = farve;
}

divコンストラクトを使用すると、フローティングdivは、各行に5 divが隣接し、コンテナのdivエッジに達すると壊れます。ただし、td内では、divはそれぞれがtdの全幅を持つことを要求します。つまり、1行に1つのdivしかありません。

幅とフロートを左に保つために、td内にdivを取得するにはどうすればよいですか？

4

1 に答える 1

1

jsFiddleリンクから始めましょう：ここに

質問を投稿するときは良い習慣だと思います。

問題がどこにあるか説明してください。jsfiddleページにバグは表示されません。

私はほんの少しの変更を行い、関連するコードの変更はありませんでした。変数を定義しただけです

var skriv = "";
于 2013-01-11T10:55:27.437 に答える