如何防止TD包裝2 div的

我有一個表有td有兩個div的表。我希望這兩個div都在排隊,但第二個div被包裝列增加。我不想爲每列設置固定寬度。如何防止TD包裝2 div的

HTML TD結構

<td class="tableHead"> 
    <div class="tableHeadTxt">Lorem Ipsum</div> 
    <div class="toggler togglerImgCollapse"> </div> 
</td>

任何幫助將不勝感激....

來源

2012-06-07 Rajasekar

爲什麼你使用'div'而不是'span'？ –

即使跨度也造成同樣的問題 – Rajasekar

div.tableHeadTxt應該得到一個white-space: nowrap; CSS。這將使它不包裹文本，所以第二個div被迫。
td.tableHead div.tableHeadTxt, td.tableHead div.toggler應該得到一個float: left; CSS。這確保它將呈現內聯。
您需要第三個div繼其他兩個之後，其中有一個clear: both; height: 0; width: 100%; CSS附加到它。這確保td保留適當的高度，儘管只有內聯元素。

來源

2012-06-07 06:17:18 Eric

嘿，現在你可以這樣做，因爲這樣

在使用white-space:nowrap;你的CSS罰款，並給予父DIV這個特性

和孩子DIV定義display:inline-block;在你的css文件中

的CSS

.tableHead{ 
border:solid 1px red; 
    white-space:nowrap; 
} 



td.tableHead > div{ 
border:solid 1px green; 
    display:inline-block; 
}

HTML

<table> 
    <tr> 

<td class="tableHead"> 
    <div class="tableHeadTxt">Lorem Ipsum</div> 
    <div class="toggler togglerImgCollapse">Lorem Ipsum </div> 
</td> 
    </tr></table>

現場演示http://jsfiddle.net/2965K/

來源

2012-06-07 06:23:06

使用浮在你的div

<table> 
    <tr> 
     <td class="tableHead"> 
      <div class="tableHeadTxt" style="float:left">Lorem Ipsum</div> 
      <div class="toggler togglerImgCollapse" style="float:left">pbaris</div> 
     </td>  
    </tr> 
</table>

http://jsfiddle.net/gkzdG/

來源

2012-06-07 06:25:52 pbaris

它不工作... – Rajasekar

我使用這些行：

<div style="background: transparent url("../Images/20_20.png") no-repeat center; height: 20px; width:80px; "> 
     <span style=" background: transparent url("../Images/ObjectType/10_10.png") no-repeat center; height: 20px; width:80px; height: 20px; width:20px; margin-left:40px; "> &nbsp;</span> 
</div>

希望它可以幫助你。

來源

2013-02-01 06:06:04

如何防止TD包裝2 div的

回答

相關問題