html - 如何防止 TD 包装 2 个 div

Question

我有一张有两个 div 的 td 表。我希望这两个 div 都排成一行，但是随着列数的增加，第二个 div 会被包裹起来。我不想为每列设置固定宽度。

HTML td 结构：

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

Answer 1

1. div.tableHeadTxt应该得到一个white-space: nowrap;CSS。这将使它不换行文本，因此第二个div是强制的。

2. td.tableHead div.tableHeadTxt, td.tableHead div.toggler应该得到一个float: left;CSS。这确保它将内联渲染。

3. 在另外两个之后，您需要第三个div，它附加了一个clear: both; height: 0; width: 100%;CSS。这确保了td尽管只有内联元素，但仍保持适当的高度。

Answer 2

嘿，现在你可以这样做

white-space:nowrap;在您的 css中使用并给父 div这个属性

和子 divdisplay: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/

Answer 3

在你的 div 中使用 float

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

Answer 4

我正在使用这些行：

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

希望它可以帮助你。