CSS,行内两个div宽度不固定,自适应布局.

问题:行内,两个div宽度都不固定,第一个撑开多少,剩下的第二个自适应补满。

方法1:

<table>

       <td style="border:1px solid black;text-align: center;white-space:nowrap;word-break:keep-all;">你试试计算的卡萨丁反馈</td>

    <td style="width:100%;border:1px solid black;text-align: center;">5566</td>

</table>

方法2:

<div>

    <div style="border:1px solid black;text-align: center;display:table-cell;white-space:nowrap;word-break:keep-all;">你试试计算的卡萨丁反馈</div>

    <div style="width:100%;border:1px solid black;text-align: center;display:table-cell">5566</div>

</div>

坑点:纯数字会自然地撑开第一个的宽度,要是单词、汉字和空格会存在换行,撑不开宽度。

所以添加了属性  " white-space:nowrap;word-break:keep-all; ”。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,636评论 32 459
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,055评论 1 4
  • CSS 3中弹性盒布局的最新版概述 在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模...
    吾名无双阅读 1,253评论 0 5