三列等宽,自动扩展的 div css

最新推荐文章于 2020-07-22 23:47:48 发布
最新推荐文章于 2020-07-22 23:47:48 发布
阅读量1.8k 收藏
点赞数
文章标签： div 扩展 float xhtml html css 
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS等高布局</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> 
<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> 
<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> 
<p>center</p> 
</div> 
<div id="right"> 
<p>right</p> 
<p>right</p> 
<p>right</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> 
<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> 
<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> 
<p>center</p> 
<p>center</p> 
</div> 
</div> 
</body> 
</html>

IntelligentDren
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自动扩展行高的详情列表-DIV+CSS
FanErZong的博客
11-05 179
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> *{ margin: 0; paddig: 0; } /** 详情面板 **/ .detail_panel{ position: absolute; right: 18px; top: calc(70px + 16px); wid
html-div自动撑大
08-17 379
下面提供几种解决方案，以修复该问题。 1.给父容器使用display属性 div#container { display: table; /* 建议使用 */ /*或者 display: table-cell */ } 2.浮动父容器 div#container { display: inline; } ...
css实现等宽3列布局
fufang0303的博客
05-28 1665
今天早上参加一公司面试，结果面试官让我当场敲代码，其中一道就是实现3列等宽自适应布局，紧张加上技术不够，当时我乱七八糟胡乱敲了一顿，下午试了试，我哭晕在厕所，为啥一到关键时刻就掉链子（捂脸），实现了顺便记录一下，方便以后看 总html布局很easy: <div class="parent"> <div class="left"> </div> <div class="center"> </div> <div class="right"&
CSS实现三列图片等宽等间距布局
祥子的博客
07-16 2819
每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% html> head> meta charset="utf-8"> meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0
css高度已知，左右定宽，中间自适应三栏布局
weixin_39037804的博客
09-05 226
css高度已知，左右定宽，中间自适应三栏布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
DIV+CSS+jQ实现省市联动可扩展
09-02
在网页设计中，省市联动是一种常见的交互功能，它允许用户在选择省份后，根据省份自动显示对应的市，进一步选择区县。这种功能在电子商务、地图服务等网站中尤为常见，提高了用户输入地理位置信息的效率。本文将探讨...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
帝国CMS 时尚DIV+CSS模板
08-23
3. **自定义性强**：用户可以根据自己的需求，通过修改CSS样式和Div结构，轻松定制出符合品牌形象的个性化页面。 4. **SEO友好**：良好的代码结构和SEO优化的元素设计，有助于提高网站在搜索引擎中的排名，增加网站...
自动生成DIV+CSS菜单
11-16
在网页设计领域，`div+css`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高页面的可维护性和可扩展性。本话题将详细介绍如何自动生成`div+css`菜单，包括其...
麦黄色食品企业div+css模板.zip
最新发布
03-18
2. **CSS3**：CSS3是CSS的最新版本，引入了许多新特性，如选择器的扩展、多列布局、渐变、阴影、动画和过渡效果等，使网页设计更为丰富和动态。在食品企业模板中，CSS3可能被用来设计出具有质感的麦黄色调，以及各种...
实现多列等宽布局
hhthwx的博客
04-05 2707
最近多学习布局的知识，争取能成为布局小仙女 何谓多列等宽布局？它看起来像下面这个样子： 对于上面这个图形，我们可以的到下面这个公式： N*W + (N-1)*G = c //化简得 N(W+G) = C+G html代码： &lt;div class="parent"&gt; &lt;div class="column"&gt;&lt;p&gt;1&lt;/p&g...
实现两列等宽布局的几种方法
阳光暖心
08-20 4558
很多年前，在CSS-Tricks发布了这个想法，随着时间的改变，我们不断更新这个话题。 当你想实现两列等宽，左边一些内容，右边一些内容时，基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半，并且可以明显的区分他们。在CSS中有很多方法都可以实现，那么来看看如何用多种方法实现这种两列等宽布局。 使用渐变背景 一个简单的方法就是我们可以使用渐变改变背景颜色。一半使用一
css实现三列等宽自适应布局（不等高、等高）
不同场景下的水平居中
07-22 2252
（一）三列等宽不等高布局 html布局： <div class="container"> <div class="box left"> 第一个 </div> <div class="box center"> 第二个 </div> <div class="box right"> 第三个 </div> &lt
CSS中实现左边固定，右边自适应
小猪猪and小马马的博客
06-11 420
1. 左边左浮动，右边加个overflow:hidden;    #lt{ float: left;width:200px; background: #ff0;}    #rt{ overflow: hidden; background: #f0f;} 2. 左边左浮动，右边加个margin-left;    #lt{ float: left; width:
【WEB前端|H5实例】HTML+css实现div盒子根据内容自动增大
dxy1128的博客
05-06 5105
链接在这里
DIV+CSS中div高度随内容增多自动延伸(DIV背景色或背景图自动伸长)
热门推荐
妈妈说有这么一群人
01-20 1万+
在IE6,7下只要不设置Div高度，就能自适应高度，背景色或背景图也能自动延伸。 但是在IE8或Firefox下面就有问题了！背景色或背景图得不到延伸！！ 解决办法看下边： 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。  在Div末尾加入代码： 　　＜di

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值