如何在td內浮動div

Question

我有兩個頁面幾乎相同的代碼。兩者都有這個CSS代碼和兩個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> 

一頁，然後有這樣的結構：

<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> 

他們分享這兩個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位於niceley彼此相鄰，每行中有5個div，並在達到容器div邊緣時中斷。然而，在td裏divs堅持每個都有td的全部寬度 - 導致每行只有一個div。

如何在td中獲取div以保持寬度並向左浮動？

Answer 1

讓我們從的jsfiddle鏈接開始：Here

我認爲這是一個很好的做法，當您發佈的問題。

請解釋問題出在哪裏，在jsfiddle頁面我沒有看到你的bug。

我只做了很少的修改，沒有相關的代碼更改。 我只定義變量

var skriv = "";