纯CSS实现三列DIV等高布局

最新推荐文章于 2019-09-07 11:22:39 发布
最新推荐文章于 2019-09-07 11:22:39 发布
阅读量96 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/Yellowshorts/p/3610720.html
版权 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #wrap
        {
            overflow: hidden;
            width: 1000px;
            margin: 0 auto;
        }
        #left, #center, #right
        {
            margin-bottom: -10000px;
            padding-bottom: 10000px;
        }
        #left
        {
            float: left;
            width: 250px;
            background: #00FFFF;
        }
        #center
        {
            float: left;
            width: 500px;
            background: #FF0000;
        }
        #right
        {
            float: right;
            width: 250px;
            background: #00FF00;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">
            <p>
                left</p>
            <p>
                left</p>
            <p>
                left</p>
            <p>
                left</p>
            <p>
                left</p>
        </div>
        <div id="center">
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
            <p>
                center</p>
        </div>
        <div id="right">
            <p>
                right</p>
            <p>
                right</p>
            <p>
                right</p>
        </div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/Yellowshorts/p/3610720.html

weixin_34144450
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现三列DIV等高布局
有 prepare , No out
09-18 1012
CSS等高布局 *{  margin:0;  padding:0; } #wrap{  overflow:hidden;  width:1000px;  margin:0 auto; } #left,#center,#right{  margin-bottom:-10000px;  padding-bottom:10000px; } #left{  float:l
css实现多个div自适应高度（一样高）
wangzhneg123的博客
03-02 7026
效果展示： 源码展示: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css实现多个div自适应高度（一样高）&lt;/title&gt; &lt;style&gt; .box-block {
js实现高度自适应的两个div高度相等
Tom_chao的博客
02-18 1654
这里有两个高度自适应的div： 点击按钮之后效果如下： CSS代码： .left{ width:100px; padding:10px; float:left; background:red; border:1px solid #ccc; } .right{ width:100px; padding:20px; float:left; backgrou
关于2个div保持一致高度的做法（用js解决）
zx75991的专栏
11-07 945
最近修改以前写的一些代码，发现点问题。 比如2个div需要动态的保持一致的高度。 原先的做法是： 如果实际的高度不大于10000px，那么这个是没有问题的，如果有一边的实际高度大于了10000px，则另外一边的高度只能被定义为10000px，不符合实际运用的需求。   经过测试，用js可以解决这个问题。 代码如下： var h = document.getElemen
CSS实现三列图片等宽等间距布局
weixin_34319999的博客
03-05 148
为什么80%的码农都做不了架构师？>>> ...
纯CSS实现三列DIV等高布局.html
09-06
纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html
用CSS实现三列DIV等高布局以传达更好的视觉效果
09-25
要实现三列DIV等高布局，可以采用一种称为“负边距+内补丁”（Negative Margin + Padding）的方法。这种方法利用CSS的`overflow`、`margin`和`padding`属性，通过创建额外的空间并隐藏超出的部分来达到等高的效果。 ...
css——之三行三列等高布局图文教程
10-30
本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```html <div id="header"></div> ...
css设置多列等高布局的方法示例
09-22
本文将详细讲解三种使用CSS实现多列等高布局的方法：弹性盒子布局（Flexbox）、表格单元格布局（Table-Cell）以及假等高列布局（Padding-Margin负值）。 1. **弹性盒子布局（Flexbox）** Flexbox是CSS3引入的一种...
分享用纯CSS实现三列DIV等高布局的方法
weixin_34199335的博客
12-01 108
2019独角兽企业重金招聘Python工程师标准>>> ...
纯css实现div三列等高布局的最简单方法简化版/也可以多列
weixin_30498921的博客
04-29 132
使用正padding和负margin对冲实现多列布局方法 这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。 html代码 <div id="wrap"> <div id="left"> <p> left&...
DIV+CSS列等高技巧
和上帝躲猫猫
11-04 969
n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。 1 背景图填充法 就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉 XHTML <div id="column1">这是第一列 <div id="colum
利用Div CSS(嵌套 盒模型)布局页面完整实例流程
setsunadoudou的博客
09-07 2520
Div+CSS(嵌套+盒模型)布局页面完整实例流程： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中国石油大学</...
CSS实现div的高度填满剩余空间
weixin_30800807的博客
05-27 156
需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构： <div id="main"> <div id="nav">nav</div> <div id="content">content</div> ...
css实现多列高度不同的div等高
开心大表哥
04-30 8287
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 &lt;!DOCTYPE HTML&...
css实现两个div并排等高
weixin_33896726的博客
03-03 238
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML+CSS完成三个盒子并列排布
热门推荐
qq_45038715的博客
08-02 3万+
使用HTML+CSS完成如下： 这个页面主要是设置一个大的盒子，放置三个小盒子，调整三个小盒子和大盒子的距离高度，往小盒子添加内容即可。 那么，大盒子上如何放置三个这样的盒子呢？ 首先，我们定义ul li 定义出大盒子和三个小盒子，给他们添加合适的高度宽度，在li 的三个小盒子里添加 float: left使其浮动，再给他们添加margin-right，这样他们之间就有个间隔啦。 代码 <!...
CSS+DIV布局
weixin_30593261的博客
07-30 1236
1.1 网页布局概述 　　网页布局的概念是把即将出现在网页中的所有元素进行定位，而CSS网页排版技术有别于传统的网页排版方法，它将页面首先在整体上使用<div>标记进行分块，然后对每个快进行CSS定位以及设置显示效果，最后在每个块中添加相应的内容。利用CSS排版方法更容易地控制页面每个元素的效果，更新也更容易，甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位。 1...
CSS实现三行三列等高布局的图文教程
"css——之三行三列等高布局图文教程" 在网页设计中，创建一个三行三列等高布局是一项常见的需求，这通常涉及到CSS的布局技巧。本教程将详细讲解如何实现这种布局模式。 首先，我们需要理解布局的基本结构。在HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值