栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

2列div布局:固定宽度的右列,左侧流体

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

2列div布局:固定宽度的右列,左侧流体

除去左列上的浮子。

在HTML代码处,右列必须位于左列之前。

如果右边有一个浮点数(和宽度),并且左边的列没有宽度和浮点数,它将很灵活:)

还要

overflow: hidden
对外部div 施加一个高度(可以是自动的),使其围绕两个内部div。

最后,在左侧列添加

width: auto
overflow:hidden
,这使左侧列与右侧列保持独立(例如,如果调整浏览器窗口的大小,并且右侧列触及左侧列,则没有这些属性,则左侧列将运行围绕正确的对象(具有此属性,它将保留在其空间中)。

HTML示例:

<div >    <div >        right content fixed width    </div>    <div >        left content flexible width    </div></div>

CSS:

.container {   height: auto;   overflow: hidden;}.right {    width: 180px;    float: right;    background: #aafed6;}.left {    float: none;     background: #e8f6fe;        width: auto;    overflow: hidden;}​​


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442313.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号