Question

我的桌子上有一个有两个div的td。我希望这两个div都在一行，但是第二个div被包装，因为没有列增加。我不想为每列设置固定宽度。

HTML td结构：

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

Answer 1

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%;附加td CSS。尽管只有内联元素，但这可以确保{{1}}保持适当的高度。

Answer 2

嘿，现在你可以像这样做

在您的css 中使用 white-space:nowrap;并罚款父div 此属性

和子div 在 css文件中定义display:inline-block;

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

希望它可以帮到你。

如何防止TD包装2个div

4 个答案: