CSS左右两列自适应高

最新推荐文章于 2025-08-12 16:33:58 发布
转载 最新推荐文章于 2025-08-12 16:33:58 发布 · 548 阅读 · 0
文章标签：

#css #class #div #xhtml #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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{
 margin :0px;
 padding: 0px;
}
.da_div{
 width: 750px;
 background-image: url(http://www.as1983.com/blog/attachments/month_0708/z200782114026.gif);
 margin:0px auto;
 margin-top:3px;
 overflow:hidden
}
.top_200{
 border-top:1px solid #afafaf;
 width: 200px;
 float: left;
 overflow:hidden
}
.t200_text{
 width: 200px;
 line-height:1.6em;
 font-size: 12px;
}
.top_540{
 width :540px;
 height: 12px;
 float:right;
 border-top: 1px solid #afafaf;
}
.t540_text{
 font-size: 12px;
 width: 200px;
 line-height:1.6em;
}
.da_div_xia{
 width: 750px;
 margin: 0px auto 0px auto;
}
-->
</style>
</head>
<body>
<div class="da_div">
<div class="top_540">
<div class="t540_text">fdsfjdsklfds</div>
</div>
<div class="top_200">
<div class="t200_text">fdfdsfdsfdsfds<br />
fdsfdsfds<br />
fdsfds<br />
fdsfdsfds<br />
fdsfdsf<br />
<br />
Fds<br />
<br />  fdsfdsfds<br />
fdsfds<br />
fdsfdsfds<br />
fdsfdsf<br />
<br />
Fds<br />
<br />  fdsfdsfds<br />
fdsfds<br />
fdsfdsfds<br />
fdsfdsf<br />
<br />
Fds<br />
<br />  fdsfdsfds<br />
fdsfds<br />
fdsfdsfds<br />
fdsfdsf<br />
<br />
Fds<br />
<br />  fdsfdsfds<br />
fdsfds<br />
fdsfdsfds<br />
fdsfdsf<br />
<br />
Fds<br />
<br />
fds</div>
</div>
</div>
<div class="da_div_xia">
<div class="top_540"> </div>
<div class="top_200"> </div>
</div>
</body>
</html>

div左右布局
weixin_34378045的博客
11-14 1569
一、左右定宽布局： 在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。 常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一个空元素，然后在这个空元素上定义cl...
css实现左边定宽右边自适应的两列布局5种方法
程序员秋风的博客
02-22 5283
在项目实践中不乏有需要两列式布局，左侧固定右侧自适应是比较常见的布局方式，现在我就来总结一下我自己所知道的5种方法。 html代码结构：<div class="box"> <div class="con1"> 我是左边 </div> <div class="con2"> 我是右边 </div> </div>第一种： css代码：.b
横向两列布局（左列固定，右列自适应）的4种CSS实现方式
09-27
主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下
【总结】：CSS常用的两栏布局方法（最全面）
weixin_60297362的博客
03-23 5089
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽） 一、CSS两栏布局（左列定宽，右列自适应宽） 最终效果： 方法一：浮动+margin HTML： <div class="container"> <div class="left">定宽</div> <div class="right">自适应
css左右两列/左中右三列自适应布局
zuo_zuo_blog的博客
04-02 1428
一、实现左边固定，右边自适应 实现思路： 1.先设置左边的宽度，让盒子左浮动； 2.设置右边的盒子，margin-left: 左边盒子的宽度。 <!-- 左边固定，右边自适应 --> <div class="content"> <div class="left"></div> <div class="right">12</div> </div> .left{ width: 400
DIV+CSS左右两列自适应高度的方法
无忧优
03-11 3231
DIV+CSS左右两列自适应高度的方法-HTMer .main{500px;overflow:hidden;} .left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;} .right{width:400px;background-colo
CSS实现两列布局
zxl1990_ok的博客
11-17 2469
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
html左右两栏高度相同,DIV+CSS左右两列自适应高度的方法
weixin_31842715的博客
06-21 914
我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。下面给出最终的效果图：具体代码如下所示：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xht...
CSS左右两列自适应高布局示例代码
09-25
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
中间列的内容高度自适应左右列的高度，这通常需要额外的CSS规则来控制。如果中间内容由于某些原因导致高度增加，左右列能够自动调整高度以匹配中间列。实现这一点通常需要依赖CSS的弹性盒子模型（Flexbox）或是网格...
浅析两列自适应布局的3种思路
09-27
本文主要探讨了在网页设计中实现两列自适应布局的三种常见方法：float、table和flex。两列自适应布局是指一列的宽度由内容决定，另一列则占据剩余的屏幕空间。这种布局方式在响应式设计中尤其重要，因为它能确保在...
左右两列定宽，中间列自适应的两种实现方法
weixin_34240520的博客
03-06 263
1. flex布局: flex: 1; // html <div class='second'> <div></div> <div></div> <div></div> </div> // css .second { display: flex; height: 100...
CSS左右两列布局宽度100%
挨踢笔记
07-31 3995
CSS左右两列布局，子级宽度自适应(100%)    标题 范仲淹 苏幕遮（怀旧） 碧云天，黄叶地。秋色连波，波上寒烟翠。 山映斜阳天接水。芳草无情，更在斜阳外。 黯乡魂，追旅思。夜夜除非，好梦留人睡。 明月楼高休独倚。酒入愁肠，化作相思泪。
利用BFC实现左右两列自适应布局
少吃点肉的博客
09-21 1663
左右两列自适应布局是前端经常会遇到的项目需求。通常的做法无外乎左列浮动定宽，然后右列或浮动，或设置外边距，或绝对定位等等。但是现在我们要用overflow来实现，想必很多人都会耳目一新。 overflow属性overflow属性最常见的一个使用场景就是规定当内容溢出元素框时发生的事情。可能的值如下:visible 默认值。元素内容不会被裁剪，元素框之外的内容仍然会呈现。 hidden 元素内容会被
JS深拷贝 浅拷贝、CSS垂直水平居中
mashirokayo的博客
08-11 847
浅拷贝，通俗来说，就是把一个对象obj1的属性值直接拷贝给另一个对象。不管这个值是普通的数据类型，还是引用类型。实现方法：1.使用Object.assign方法 2.使用扩展运算符 3.手写拷贝函数 拷贝对象的属性与源属性共享相同的引用。当更改源对象或拷贝的副本时，可能导致对应的对象也发生更改。如果对象obj1是obj2的浅拷贝，obj1！==obj2成立。两个对象的属性有相同的名称且顺序相同、属性值相等、原型链相等。对拷贝的副本的顶层属性的重新赋值不会影响源对象；对拷贝副本的嵌套对象的重新赋值
现代 CSS工具
2401_84730123的博客
08-12 516
登录场景</a><a href="#">角色</a><a href="#">关于
【CSS3】录音中。。。
最新发布
weixin_43951592的博客
08-12 178
一些动画效果
HTML 与 CSS：从 “认识标签” 到 “美化页面” 的入门指南
2301_80543957的博客
08-08 976
HTML（HyperText Markup Language，超文本标记语言）是用于创建和描述网页的标准标记语言。他不是编程语言，而是通过标记标签来定义网页结构和内容的标记语言。method：表单数据的提交方式，常用的有post和get。span：行内元素，不会独占一行，常用来包裹小段文本。div：块级元素，会独占一行，常用来做页面大结构。textarea标签：多行文本输入框。链接与资源标签（链接外部标签）无语义标签：div&span。select标签：下拉菜单。标题标签：h1-h6。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值