使用media-obj和media-bd类似的样式,大多数采用的是display: table-cell(即是table中td)来实现。当然设置display是不够,还要根据情况设置width。如下面四种情况:

1.当不设置width时,会出现下图情况:

空了很多

2.当设置width >= username的长度(如我设置width: 160px)时:

多的更多,还有一个问题,你没法确定最大长度,而你做的多半也是大于username的长度。

3.当设置width保证小于每个单词的长度,如:width: 1% .那会怎么样了,看下图:

发现完美自适应。

ps: width: 1%;以网页通常显示最大尺寸1920来说,1%也就是19.2px,及时一个14px字母那也足够看不出明显空白。另外,bootstrap也是这么做的。

4.通过第3种情况,估计有人会想设置0%,可以不?不可以,td的width:0%无效, 和没设置width一样

table的td的1%的更多相关文章

  1. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  2. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  4. html 的table tr td的使用

    cellspacing 属性规定单元格之间的空间. cellpadding 属性规定单元边沿与其内容之间的空白. border 简写属性在一个声明设置所有的边框属性. border 用在table属性 ...

  5. table中td内容过长 省略号显示

    首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...

  6. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  7. 让table中td的内容靠上对齐

    valign=“top”; <td valign="top"></td> 点此查看详细table的td的valign属性

  8. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  9. table布局 防止table变形 td固定宽度

    防止table变形 td固定宽度 具体设置如下代码: <!doctype html> <html lang="en"> <head> <m ...

随机推荐

  1. Qt打包部署程序自动查找依赖DLL工具windeployqt

    qt编译好一个exe程序之后,部署到一台没有开发环境的机器上,需要一起拷贝其依赖的dll文件.这时需要一个windeployqt工具来帮忙,因为手动拷贝的话容易遗漏. https://blog.csd ...

  2. Kafka manager安装 (支持0.10以后版本consumer)

    下载地址:  https://pan.baidu.com/s/1jIE3YL4 步骤: 1. 解压kafka-manager-1.3.2.1.zip 2. cd kafka-manager-1.3.2 ...

  3. MQTT-C-PUB

    /* ============================================================================ Name        : mqtest ...

  4. drizzleDumper的原理分析和使用说明

    https://blog.csdn.net/qq1084283172/article/details/53561622 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  5. Makefile 链接静态库

    Linux的静态库是以.a结尾的,要连接静态库有两种方法,一种是在编译命令最后直接加上库路径/库名称. 例如你的库在绝对目录/lib/libtest.a下面你就可以这样来编译$(CC) $(CFLAG ...

  6. 在本机搭建mycat 单机环境,使用mariadb 伪集群

    首先搭建mairadb的集群 master 使用端口3306 slave 使用端口3406 master 相关配置 在my.ini 文件的[mysqld] 节点中添加或修改如下配置 #允许其他机器re ...

  7. 使用Struts时,JSP中如何取得各个会话中的参数值?

    · request <s:property value="#request.req"/> 或者 ${requestScope.req} · session <s: ...

  8. v-bind小demo

    啊哈哈,小颖好久没有更新博客啦,大家有没有想我呀,嘻嘻,自恋一把,

  9. jenkins - svn: E170001报错的原因以及解决方案

    1. 什么问题What? 使用Jenkins配置的svn拉取项目,Jenkins报错:svn: E170001; Your credentials to connect to the reposito ...

  10. jmeter函数助手之time函数实操

    在一个接口测试中,需要提交的请求中要带时间,在看完jmeter帮忙文档,正好总结一下 1.需求 在一个XML请求中请求数据要带有时间,如下 "><ID>/lte/pdeta ...