CSS左右两列自适应高

最新推荐文章于 2023-05-11 09:56:52 发布
最新推荐文章于 2023-05-11 09:56:52 发布
阅读量669 收藏
点赞数
分类专栏： 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>无标题文档</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>
<p><a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
淡如轻风
关注
专栏目录
div 左右排列 高度自适应_css实现div两列布局（两种方法）
weixin_39933336的博客
11-29 9178
一、应用场景左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应二、思路首先把这个问题分步解决，需要攻克以下两点：1、让两个div并排到一行2、让一个div宽度固定，另个div占据剩下宽度的空间关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；关于第二点，首先有一个宽度固...
fdfdsfdsfdsfds
02-18
fdsafajfkldjakfldsjklfdsjfkldjl;jfdkls;ajfkdl;jfkajfdklsffffffffffffffffffff
两列，一列有宽度，另外一列自适应(div 布局)
深海狂鲨
07-19 962
#a {        width:20px;        border:1px solid;        display:inline;        float:left;}#b {        border:1px solid;        display:inline;        float:left;}                  111111111
css 左边高度自适应，保持与右边的高度一致
DarlingYL的博客
05-11 1917
实现效果：左边红色区域高度不定，跟随右边蓝色区域的高度变化自适应。
li横向并排2列排版，保证每行的两个li高度一致
weixin_33688840的博客
08-10 1024
li做浮动布局，左右高度不一致会出现错乱 解决： li:nth-of-type(odd){clear:both;} 转载于:https://www.cnblogs.com/ghfjj/p/7337169.html
html左右两栏高度相同,DIV+CSS左右两列自适应高度的方法
weixin_31842715的博客
06-21 842
我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。下面给出最终的效果图：具体代码如下所示：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xht...
DIV+CSS左右两列自适应高度
卯野芽衣子
11-06 389
费大富大贵
DIV+CSS左右两列自适应高度的方法
无忧优
03-11 3165
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左右两列自适应高布局示例代码
09-25
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
中间列的内容高度自适应左右列的高度，这通常需要额外的CSS规则来控制。如果中间内容由于某些原因导致高度增加，左右列能够自动调整高度以匹配中间列。实现这一点通常需要依赖CSS的弹性盒子模型（Flexbox）或是网格...
浅析两列自适应布局的3种思路
09-27
本文主要探讨了在网页设计中实现两列自适应布局的三种常见方法：float、table和flex。两列自适应布局是指一列的宽度由内容决定，另一列则占据剩余的屏幕空间。这种布局方式在响应式设计中尤其重要，因为它能确保在...
DSFDSFDS
weixin_34377919的博客
08-07 186
FDSFDSFDSFDSFDSFDS 转载于:https://blog.51cto.com/sheng17230/2155950
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
最新发布
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
基于struts+sqlserver网络购物系统毕业课程源码设计+论文资料
09-14
编号：150 系统功能： 展示网站最新的商品信息。 展示网站特价的商品信息。 为用户提供修改个人资料和查看在网站操作情况的平台。 提供用户在网站上购物的平台。 展示网站发布的公告信息。 展示商品的销量排行。 展示网站的友情链接信息。 对商品详细信息以及分类信息进行管理。 对用户基本资料、交易制度、消费情况及留言信息进行管理。 对用户提交的订单进行管理。 对管理员信息、网站公告信息、商业资讯信息及友情链接信息进行管理。 系统运行稳定，具有强大的数据处理能力。 操作注意事项 （1）本系统的用户名为：admin，密码为：admin （2）admin管理员的信息不能删除。 （3）用户注册登录后，可进行商品购买、商品信息查看以及订单查询操作。 （4）后台登陆地址：http://localhost:8080/WebShopping/bg-land.jsp。
CSS基础布局：单列与两列自适应技巧详解
本文是一篇关于CSS布局的小结，主要介绍了三种常见的布局方式：单列布局、两列自适应布局以及三栏布局中的圣杯布局和双飞翼布局。首先，我们来看看单列布局： 1. 单列布局分为两种类型： - 等宽单列布局：将`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值