div+css 构建3行3列的表格，在FF和IE，以及苹果的浏览器下均可以正常的显示，放大，缩小

最新推荐文章于 2023-07-11 22:18:10 发布
原创 最新推荐文章于 2023-07-11 22:18:10 发布 · 1.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#浏览器 #css #div #ie #float
#table

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<

 

 

html><head

>

<

 

 

style

>

#table

 

 

{

 

 

clear:none

;

 

 

width:180px

;

 

 

border-color:Red

;

 

}

#table

 

 

ul

{

 

 

clear:left

;

 

 

margin:0px

;

 

 

padding:0px

;

 

 

width:200px

;

 

 

list-style-type:none

;

 

 

border-color:Red

;

}

#table

 

 

li

{

 

 

float:left

;

 

 

display:block

;

 

 

margin:0px

;

 

 

padding:0px

;

 

 

border-left:1px #000 solid

;

 

 

border-right:1px #000 solid

;

 

 

border-bottom:1px #000 solid

;

 

 

width:60px

;

 

 

background-color:Green

;

 

 

border-color:Red

;

}

</

 

 

style

>

</

 

 

head

>

<

 

 

body

>

<

 

 

div id

="table">

 

 

<ul>

 

 

<li>aaa1</li> <li>aaa2</li> <li>aaa3</li

>

 

 

</ul

>

 

 

<ul>

 

 

<li>bbb1</li> <li>bbb2</li> <li>bbb3</li

>

 

 

</ul

>

 

 

<ul>

 

 

<li>ccc1</li> <li>ccc2</li> <li>ccc3</li

>

 

 

</ul

>

</

 

 

div

>

</

 

 

body

>

</

 

 

html

>

div+css布局三行三列中间自适应
01-28
div+css布局 三行三列 中间自适应
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
使用grid布局解决flex布局最后一行不足的问题
qcc0716的博客
08-13 2901
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
Div+CSS构建三行三列框架
qq_19286785的博客
09-21 4566
要构建的框架如图所示： 方法一：使用div的浮动窗口属性 显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #header{ background-color
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
icemwj的博客
10-05 2万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
一个CSS上中下三行三列结构的Div布局
web开发自学
06-01 3189
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"; lang="gb2312"&gt
div三行或三列铺满全屏
ch206265的博客
04-07 3900
这里写自定义目录标题一、实现要求二、实现过程1、字体水平居中和垂直居中 一、实现要求 铺满屏，字体居中 交互，点击一个盒子能够改变另外一个盒子的颜色 最开始的实现效果使这样的： 但是有些问题： 字体只有水平居中，没有垂直居中； 第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完...
3行3列表格 table实现，div+css实现
weixin_34392906的博客
03-21 1028
table实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l...
div九宫格图片布局
weixin_44770377的博客
05-07 2082
以前我都会用display:flex弹性布局的方式来写，今天学会了一种新写法，不浮动，也不弹性的方式，用div的方式实现。 给div设置固定宽度，并带上右外边距。然后用style对index第4个（一排放4个的话index % 4 === 3 ）的margin-right:0px <div style="width: 100%;min-height: 800px;margin-top: 6...
用css+div实现表格的每行显示3列的功能
weixin_33928137的博客
10-13 923
转自网络方案一：<style type="text/css">.csstb{font-size:12px;width:600px;}.csstb div,.csstb li{float:left;width:198px;line-height:20px;/*行高*/border:#999 solid 1px;}.csstb ul{margin:0;padding:0;list-styl...
jsp输出带表头的三行三列的表格
03-09
jsp输出带表头的三行三列的表格，通过本文档的代码可以教会大家如何通过JSP界面输出表格~
完美的DIV三行三列自适应高度布局
season777的专栏
07-16 2818
我们一般讨论的自适应高度的DIV布局，都是指有背景区分的，但在我们的实际应用中，很少有网站这么用的，大多数都不是用背景区分的。但今天我们并 不是讨论它的实用性如何，而只讨论实现这种布局的一种较完美的解决方法。 顾名思义，所谓的自适应高度，就是某一列撑长而其它列的高度也跟随相应地被撑长，这个效果如果用table的话，轻而易举就完成了，而用DIV就没 这么容易了。之前也有试过不少的方法，比如用J
CSS-Grid网格布局详解
学习，思考，输出
07-11 4192
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 6843
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
html三行三列模式布局,HTML常使用的布局方法——多列布局
weixin_39631951的博客
06-09 2628
CSS3中提供的新属性columns，是用于多列布局的。在这之前，有些大家习以为常的排版，要用CSS动态实现其实是比较困难的。如下方的排版，类似于报纸排版：在不知columns属性之前，这种效果想想确实很难实现，因为内容是动态的。搞div容易，但每个div内放多少文字呢？一篇文章该在哪行哪段剪切进不同的div内呢？你肯定不愿意为每一段文字，都在特定的地方插入div标签，简直要疯了。而使用colum...
HTML表格怎么设置一列占三行,如何把Div分成3行*3列不用table.
weixin_42355665的博客
06-23 2742
第一种方式html:123456789csss:*{margin:0 auto;padding:0;}#box{height:200px;width:200px;border:1px solid red;}div div{width:100%;height:32.855%;}span{display:inline-block;height:100%;width:32%;border:1px sol...
html三行三列模式布局,一个CSS上中下三行三列结构的Div布局
weixin_35673514的博客
06-09 2287
>上中下三行三列结构的Div布局body{text-align:center;margin:0;padding:0}div{height:200px;}.title{margin:0 auto;width:776px;background-color:#abcdef;}.middle{margin:0 auto;width:776px;}.left{float:left;clear:ri...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
热门推荐
王迪
12-17 3万+
知识点：网页布局的方式 1、网页布局 常见的页面布局方式：表格布局、DIV+CSS布局、框架布局。 表格布局：用来显示较多的数据，如OA系统、ERP系统或CRM系统。（一般用在局部） DIV+CSS布局：相对来说最灵活的布局方式，完全实现内容和样式的分离。 框架布局：通常用在网站后台的设计。 2、DIV+CSS布局 2.1 使用DIV+CSS制作网页流程 第一步：将页面在整体上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值