使用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. Python中字符串的intern机制

    intern机制: 字符串类型作为Python中最常用的数据类型之一,Python解释器为了提高字符串使用的效率和使用性能,做了很多优化,例如:Python解释器中使用了 intern(字符串驻留)的 ...

  2. C语言中打印返回值

    demo: ----return :返回值------------------ int mosquitto_username_pw_set(struct mosquitto *mosq, const ...

  3. AngularJS的表达式、指令的学习(2)

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  4. [原]如何为SqlServer2008数据库分配用户

    前言: 当一个项目完成后,为了数据安全,总会对该项目的数据库分配一个用户,应该说总会创建一个用户来管理这个数据库,并且这个用户只能管理这个数据库.搞了好多次,每次都忘记怎么设置,所以写一篇博文记录一下 ...

  5. iOS 在已有项目添加CoreData

    本文转载至 http://cnbin.github.io/blog/2016/03/11/ios-zai-yi-you-xiang-mu-tian-jia-coredata/ 如果是新项目很好说,新建 ...

  6. codeforces水题100道 第一题 Codeforces Beta Round #1 A. Theatre Square (math)

    题目链接:http://www.codeforces.com/problemset/problem/1/A题意:至少用多少块边长为a的方块铺满NxM的矩形区域.C++代码: #include < ...

  7. Spring系列之访问数据库

    一.概述 Spring的数据访问层是以统一的数据访问异常层体系为核心,结合JDBC API的最佳实践和统一集成各种ORM方案,完成Java平台的数据访问. 二.JDBC API的最佳实践 Spring ...

  8. Android自定义字体

    1.在assets中创建文件夹fonts,放入字体文件.ttf 2.使用实例: TextView tv= (TextView)findViewById(R.id.tv); Typeface tf =  ...

  9. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  10. [OpenGL]用OpenGL制作动画

    //在窗口内绘制一个移动的矩形 /*我们通常还可以用OpenGL程序创建动画效果,这里我们利用前面的例子,绘制正方形,并使这个正方形在窗口的边框反弹.这里需要创建一个循环,在每次调用显示回调函数之前改 ...