使用display:table来解决一些问题

一直有，多栏的需求，当然用table布局，很快就做完了。不怎么喜欢用table，刚开始使用display:table，但是有一条老是不能达到我的效果，那就是有一行不固定宽度的时候，就不知道怎么处理，今天终于发现了怎么解决这个问题的办法，将width:尽可能大。使用table-layout:auto;代码如下:

 1 <div style="display:table;" id="addresses">
 2                         <div style="display:table-row;">
 3                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
 4                                 <img style="width: 19px;" src="../images/mypoint.png" />
 5                             </div>
 6                             <div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
 7                                 <div>无法确认地址,请电话联系客服我很长!</div>
 8                                     <div style="color: #999;">xxxxx</div>
 9                                 </div>
10                             <div style="display:table-cell;padding-right:10px;  vertical-align: middle;width:100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥10.00起送</span></div>
11                         </div>
12                         <div style="display:table-row;">
13                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
14                                 <img style="width: 19px;" src="../images/mypoint.png" />
15                             </div>
16                             <div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
17                                 <div>话联系客服!</div>
18                                     <div style="color: #999;">xxxxx</div>
19                                 </div>
20                             <div style="display:table-cell;padding-right:10px;  vertical-align: middle;width:100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥125.00起送</span></div>
21                         </div>
22                     </div>

记录此文章，以备后查。

时间： 2024-10-08 18:57:01

使用display:table来解决一些问题的相关文章

css Table布局-display:table

使用表格布局一直是一个敏感的主题.一般情况下,Web开发人员考虑基于表格布局是禁忌.尽管反对的理由看起来证据很充分,但是大多数开发者除了谴责基于表格的布局,都无法提供完善的使用场景."表格不好." 从早期反对HTML Table(<table>标签)开始这种势头就非常强劲.几代开发者被成功洗脑,根深蒂固的认为:任何使用表格都是邪恶的. 诚然,我也是避免使用表格布局的开发者之一,即使是显示表格数据. 我甚至曾经斥责我的下属开发者同事,当他们使用 display:table 用

基于display:table的CSS布局

当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击.最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单.网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性.我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响. 使用CSS表格 CSS表格

使用display:table使两栏布局高度相等

两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</titl

clearfix为什么用display:table,而不用display:block

我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;} 但是为嘛用 display:table哪? 我用display:block好像也是显示很正常,也能清除浮动. 曾经也搜索过这个问题,感觉都讲得糊里糊涂的还是我水平太低了,反正我是看不懂他们想要表达啥意思,也不给例子,好了,废话不多说, 看结果吧: https://f

Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题

转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: 1 2 3 4 5 6 7 8 9 10 11 12 create or replace procedure getidlist is l_idlist varchar2(200); begin l_idlist:='1,2,3,4'; for brrs in (select * fro

js中style.display=""无效的解决方法

本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码代码如下: <style> #name { display:none; }</style></head><body><div id=

display: table; 100%的宽度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box1 { display: table; } .box2 { display: table-cell; border: 1px solid #000; } .box3 { width: 1

基于CSS属性display:table的表格布局的使用

项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并.个人建议全新实现使用<table> HTML标签即可一.CSS display属性的表格布局相关属性的解释: table 此元素会作为块级表格来显示(类

display:table表格合并单元格

直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctype.html" %> <html> <head> <title>补贴项目属性管理</t