【CSS+Html】解决左右浮动的两列内容，随浏览宽度变化而自适应？

最新推荐文章于 2022-01-17 14:55:59 发布
最新推荐文章于 2022-01-17 14:55:59 发布
阅读量775 收藏
点赞数
分类专栏： CSS/HTML 浏览器 前端 文章标签： css ie 前端 解决方案 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanzhusiyu/article/details/41520725
版权
CSS/HTML 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏
浏览器
2 篇文章 0 订阅
订阅专栏


问题描述:

1、外框box的宽度是随浏览器变化而变化的

2、内框conbox1和conbox2宽度自适应，间距固定为20px

--------------------------------------------------------------------------------------------------------------------

解决方案:

1、HTML布局

2、CSS样式

3、预览效果


lanzhusiyu
关注
专栏目录
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
本篇讨论的知识点，是如何设计一个左右两列自适应，中间列内容随中间列内容高度自适应的布局。 首先，我们要知道如何使用CSS来控制布局，以及HTML结构对于布局的支持。传统的表格布局因为灵活性差和扩展性差等问题...
关于css中3列浮动三列宽度自适应布局
front_endxiaobaia的博客
10-17 898
所谓“自适应”不过就是对width设置以百分比为单位的宽度，本文所讨论的只是一点关于3列浮动三列宽度自适应布局的细节问题。 首先来看下3列浮动三列宽度自适应布局的效果： 3列浮动三列宽度自适应布局目前总结了两种方法实现： A. <style type="text/css"> body{ margin:0; } #left{ background-color:#ffcc00; b...
页面布局左右固定与自适应（两栏布局）
qq_52819902的博客
01-17 1262
两栏布局
关于浮动元素宽度自适应父容器宽度的问题
FuChenRenShen的博客
08-31 4985
希望有朋友能帮忙解答！ 自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式： (样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符) <div class="parent"&gt...
css/div做的连续几个div水平浮动(float)元素时，当浏览器窗口缩小的时候，浮动元素就往下跑了
剑雪封喉
04-09 2093
注意：div 布局时用float时： css/div做的连续的几个div水平浮动(float)时，当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了 这是一定要在最外套的div要有固定的width才行。这样就绝对不会往下跑了 ...
CSS左右两列自适应高布局示例代码
09-25
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
DIV CSS：网页一行两列背景自适应
12-10
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
关于HTML和CSS中左右布局中的浮动问题
fanxiaokun526的博客
05-15 2314
 这是预想中要写的界面，可是我做的界面出来总是这个样子，右面设置了float-right了，图片按自己所想的是悬浮在右面了，可是就是不能跟左边的并排啊。按自己想的，不应该出现这样的布局，于是自己就尝试各种方法，是不是1.宽度不够被挤下来了，待我查了审计元素后，不是宽度不够的原因。2.是不是自己写的布局没有包括在banner中，事实证明也没有。3.我不会靠加个margin-top 来让它上
css/div做的连续的几个div水平浮动(float)时，当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了
kankankankan2222的专栏
04-26 9821
注意：div 布局时用float时： css/div做的连续的几个div水平浮动(float)时，当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了 这是一定要在最外套的div要有固定的width才行。这样就绝对不会往下跑了
float 浮动 div 不随浏览器分辨率 大小而位置发生变化
z69183787的专栏
04-10 1万+
dsadsadsa 111111111111111111 在浮动层外部 增加 父DIV 设定宽度jik
html中浮动导致的遮盖和元素高度过高的自适应设定
KevinSilent的博客
07-09 1515
浮动导致的遮盖有两种解决方法：一种是给被浮动的元素i安吉一个父级元素，另一种解决方按是给他们添加一个兄弟元素，在兄弟元素中设定clear：both 高度的自适应设定给父元素添加一个属性：overflow：hidden
常见的两列自适应的几种布局方式
ggbee_的博客
06-16 863
第一种：采用浮动/定位的方式来实现自适应； <!-- 方式一: 采用浮动/或者定位 --> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { /* 定位方式 第二步 */ position: relative;
div+css如何让页面随着窗口的变化内容位置不变
热门推荐
u010869754的专栏
04-30 3万+
前端关于div内容随着浏览缩放如何不改变其位置，不改变元素内容的相对位置，使其如浏览器正常般呈现 在我们眼前
两列左列浮动，右列自适应宽度的四种方法
xiaozhen0610的博客
06-20 303
第一种方法，网上流传比较广的方法。采用左列 left 浮动，右列不浮动，采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外，当浏览器框缩小到一定程度时，右侧会掉下来。 <!DOCTYPE html> <html> <head> <title>方法一</title> <style type="text/css"> #left {width:100px;height:100px;background
DIV布局之道四：clear:both清除DIV两侧浮动详解
xyjikl
06-30 6129
我们要实现图中表格实现的效果，使用DIV+CSS该如何实现呢？ 众所周知，要实现如上效果，我们写一个两行两列的表格，使得表格第二行两个单元格合并即可实现上图效果，可以使用如下代码实现： XML/HTML Code复制内容到剪贴板 table width="303" height="151" border="1" align="center" cellpadding
DIV+CSS两列布局教程：实现宽度自适应与清除浮动技巧
作为DIV+CSS布局教程系列的第二篇，它着重于实现一个宽度自适应的两列布局结构。这种布局方式利用HTML和CSS的灵活特性，使网页内容能够根据浏览器窗口的大小动态调整。 首先，两列布局的实现通常通过浮动技术来构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值