DIV+CSS左右两列自适应高度的方法

最新推荐文章于 2024-06-11 12:15:54 发布
最新推荐文章于 2024-06-11 12:15:54 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： 静态网页制作 文章标签： DIV+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=gb2312" />

<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>

<style type="text/css">

.main{500px;overflow:hidden;}

.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}

.right{width:400px;background-color:#F00;float:left;}

</style>

</head>

<body>

<div class="main">

    <div class="left">左侧内容1</div>

    <div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>

</div>

</body>

</html>

    说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。

原创文章：http://www.blogbus.com/ada-life-logs/231591213.html
lo11ve
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css两列布局，一列固定宽度，另一列自适应宽度
啊哈前端的专栏
05-02 2754
两列之一固定，另一列自适应 1-2-1单列变宽布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box
学习DIV+CSS网页布局之两列布局
01-19
DIV+CSS 网页布局第二篇：两列布局 1、宽度自适应两列布局 　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 　当元素使用了浮动之后，会对周围的元素造成影响，那么就...
两列自适应布局
weixin_30478757的博客
11-05 117
随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。 分析： 需要满足三个要求： ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法（不考虑绝对定位）： 组合起来，会有很多种实现方式。 方法： <div class="left">...
如何用css实现两列布局?
最新发布
weixin_45596561的博客
06-11 1369
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
左边固定，右边自适应及左边自适应，右边固定布局
weixin_30294709的博客
04-05 193
一、左边固定，右边自适应的布局 1. 左边左浮动，右边加个overflow:hidden; #lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;} 2.左边左浮动，右边加个margin-left; #lt{ f...
两列自适应布局的4种思路
weixin_34319374的博客
05-03 265
前面的话 　　前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思路   float 【思路一】float 　　在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应...
DIV CSS：网页一行两列背景自适应
12-10
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
学习DIV+CSS网页布局之三列布局
09-24
通过理解和掌握`DIV+CSS`中的宽度自适应和固定宽度的三列布局技巧，设计师能够创建出既美观又功能强大的网页。无论是对于初学者还是经验丰富的开发者，熟练运用这些布局技术都是提高工作效率和质量的关键。
学习DIV+CSS网页布局之一列布局
09-24
在这个例子中，我们创建了三个`<div>`元素，分别代表页头、主体内容和页脚，并通过CSS设置了它们的宽度、高度、背景颜色和对齐方式。值得注意的是，为了让整个布局居中显示，`#main`的宽度被设定为固定值，并通过`...
DIV+CSS模板
01-10
`DIV+CSS`模板的源码可以帮助开发者了解如何使用`CSS`控制页面元素的排列、对齐、尺寸、颜色、边距等，以及如何通过`DIV`实现复杂的多列布局、自适应设计等。 在50个`DIV+CSS`模板的列表中，我们可以期待各种各样的...
运用css设置左右自适应
m0_62728880的博客
01-20 871
css部分: * { margin: 0; padding: 0; } .clearfix:after{ clear: both; display: block; content: ''; } .father { width: 100%; height: 180px.
两列自适应和三列自适应布局
Auyuer的博客
08-14 519
1.两列自适应布局方式 两列自适应，左边固定宽度，右边自适应。方法一：左右各一个div，左边div用绝对定位，定宽，右边用margin-left：“左边div的宽度”。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
左右两列自适应高度
weixin_30916125的博客
10-17 139
DIV+CSS左右两列自适应高度的方法 说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。 如何让2个并列的div根据内容自动保持同等高度 js方法 转载于:https://www.cnblogs.com/yangai...
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
风过无声
02-20 5513
摘自：http://www.5icool.org/a/200912/39.html 1.第一种方法，网上流传比较广的方法。采用左列left浮动，右列不浮动，采用margin-left定位的方式。 #left {width:100px;height:100px;background-color:#ccc;border:2px solid #333; float:left; }
CSS实现左侧固定，右侧自适应(5种方法)
weixin_52512511的博客
08-13 5192
【代码】CSS实现左侧固定，右侧自适应(5种方法)
中间固定 左右自适应 css写法
Chou_Junn的博客
11-25 184
html： &lt;div class="container"&gt; &lt;div class="left"&gt; &lt;div class="left-container"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="center&q
css - 左定宽+右自适应
火星男孩的分享空间
02-07 951
参考：CSS常见布局及解决方案 左定宽+右自适应 实现方法如下： 1、position + margin： html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> * { padding: 0; margi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值