一个CSS上中下三行三列结构的Div布局

最新推荐文章于 2021-10-05 19:38:56 发布
最新推荐文章于 2021-10-05 19:38:56 发布
阅读量157 收藏
点赞数 1
原文链接：http://www.cnblogs.com/WestGarden/archive/2012/06/01/3138351.html
版权 
<!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";  lang="gb2312"> 
<head> 
<meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312"  /> 
<title>上中下三行三列结构的Div布局</title> 
<style>
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:right; 
                width:20%; 
                background-color:#eeefff; 
} 
.center 
{ 
                float:left; 
                clear:right; 
                width:50%; 
                background-color:#CCC000; 
} 
.right 
{ 
                 
                float:left; 
                clear:right; 
                width:30%; 
                background-color:#fff000; 
} 
.both 
{ 
                clear:both;   
                width:100%; 
                background-color:#666999;   
} 
.footer 
{                 
                margin:0  auto; 
                width:776px; 
                clear:both;   
                background-color:#000fff;   
} 
</style> 
</head> 
<body> 
<div  class="title">顶部</div> 
<div  class="middle"> 
                <div  class="left">左侧</div> 
                <div  class="center">中部</div> 
                <div  class="right">右侧</div> 
                <div  class="both">全行</div> 
                <div  class="left">左侧</div> 
                <div  class="center">中部</div> 
                <div  class="right">右侧</div> 
                <div  class="both">全行</div> 
                <div  class="left">左侧</div> 
                <div  class="center">中侧</div> 
                <div  class="right">右侧</div> 
</div> 
<div  class="footer">底部</div> 
</body> 
</html>


 

转载地址：http://blog.csdn.net/chinalogs/article/details/7617117

转载于:https://www.cnblogs.com/WestGarden/archive/2012/06/01/3138351.html

weixin_33733810
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css布局三行三列中间自适应
01-28
div+css布局 三行三列 中间自适应
CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
weixin_33887443的博客
11-19 348
我们碰到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV CSS实现三行两列的布局。　　我们看下面的图片： 　　这样的结构大家再熟悉不过了，我们该如何用DIV CSS实现它呢。我们看下面的分析图片： ...
十天学会Div+CSS第三天之【二列和三列布局】
weixin_33695450的博客
08-07 93
一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下： &lt;div id="side"&gt;此处显示 id "side" 的内容&lt;/div&gt; &lt;div id="main"&gt;此处显示 id "main" 的内容&am
div+css 构建3行3列的表格，在FF和IE，以及苹果的浏览器下均可以正常的显示，放大，缩小
我的地盘
04-27 1265
                                         html>head>  style>#table  { 
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
学习DIV+CSS网页布局之三列布局
12-13
DIV+CSS 网页布局第三篇：三列布局 1、宽度自适应三列布局 　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列...
脚本控制三行三列自适应高度DIV布局
10-31
例如，在一个三行三列的布局中，每个单元格内的内容长度不一，但要求每一行中的所有单元格高度相同。 ##### 2. JS脚本实现原理 为了实现上述目标，本示例采用了JavaScript脚本进行控制。具体实现过程分为以下几个...
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示
06-12
本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局，并确保在各种浏览器中都能实现中间内容的居中显示。 首先，我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域（content）、内边距（padding...
html三行三列模式布局,CSS三行三列Div布局
weixin_39879522的博客
06-09 1036
#onetype{width:800px;Height:600px;border: 1px #48D1CC solid;margin: auto;}#head{width : 780px;Height: 100px;border: 1px #48D1CC solid;margin: 2px auto;}#contain{margin-right: auto;margin-left: auto;wi...
Div+CSS构建三行三列框架
qq_19286785的博客
09-21 4200
要构建的框架如图所示： 方法一：使用div的浮动窗口属性 显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #header{ background-color
完美的DIV三行三列自适应高度布局
weixin_30268071的博客
09-09 251
我们一般拿出来讨论的自适应高度的DIV布局，都是指有背景区分的，不用区分的三列布局很容易。不过在实际应用中很少有网站这样用，大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何，而只是讨论实现这种布局的一种较完美的解决方案而已。 所谓自适应高度，也就是不管某一列撑长而其它列的高度也跟跟相应地撑长，这个效果如果用TABLE的话是轻而易举的，而用DIV就没那么容易了。之前本民工也尝...
DIV+CSS布局第一部分，一列布局，两列布局，三列布局以及组合布局举例说明
XXLoveSHT的博客
06-19 8192
DIV+CSS布局一一列布局：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;布局&lt;/title&gt; &lt;style type="text/css"&gt; body,h1{margin: 0;
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
html三行两列布局,div+css经典三行两列布局
weixin_36429993的博客
06-20 3256
写在前面在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：代码闲来无事，就自己动手实现了一下，代码如下：1 23 4 5 6 首页7 8 * {9 margin: 0;10 padding: 0;11 ...
DIV布局之三行三列之高度自适应补遗
飘零雾雨的专栏
09-29 849
很显然，上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点，那样布局设计其实也就可以了，但如果针对的是门户，或者PV超过百万，千万。。。的网站，这样的布局就显得捉襟见肘了。也就是说，在网络环境不变的情况下，我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/5.ht
利用div+css 设计一个三行三列的一个布局效果
最新发布
05-26
可以尝试以下代码实现一个三行三列的布局效果： HTML代码： ```html <div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> <div class="row"> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> </div> <div class="row"> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> </div> </div> ``` CSS代码： ```css .container { display: flex; flex-wrap: wrap; } .row { display: flex; flex-wrap: wrap; width: 100%; } .col { flex-basis: 33.33%; height: 100px; background-color: #ccc; border: 1px solid #666; box-sizing: border-box; } ``` 在这个代码中，我们使用了 Flex 布局，使得我们的容器 `.container` 可以自适应屏幕大小，每一行都可以最多展示三个元素。`.row` 定义为一个行元素，内部的 `.col` 元素则定义为列元素，使用 `flex-basis: 33.33%` 让每个列元素占据一行中的三分之一，通过 `height: 100px` 和 `background-color: #ccc` 以及 `border: 1px solid #666` 来设置每个列元素的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值