首页 > 解决方案 > 表 TD 元素换行中的图层(div)

问题描述

我正在尝试在表 TD 元素中制作 layer(div) 框。问题是文本自动换行。我认为因为它在表格单元格中。

我希望图层框宽度是流动的,但最大宽度是 400 像素;有没有办法解决这个问题?

这是演示 http://jsfiddle.net/671474hx/160/

    <style>
   .box { position:relative;}
.layer { position:absolute; display:inline-block; top:30px; left:30px; border:1px solid #000;   max-width:400px; background:#eee  }

     </style>

<table class="list_member" border=1>
<tbody>
  <tr>
    <td>

      <div class="box">
      td
        <div class="layer">
        text text text text text text text text text text text 
        </div>
      </div>

    </td>
  </tr>

</tbody>

</table>

标签: css

解决方案


不要给你的 .layer 类一个最大宽度。将其更改为固定宽度,文本将在容器中换行。

.layer{
 width: 300px;
}

推荐阅读