二列右列宽度自适应布局

最新推荐文章于 2020-08-24 22:05:58 发布

codeshark

最新推荐文章于 2020-08-24 22:05:58 发布

阅读量819

点赞数

分类专栏： Div+CSS 文章标签： xhtml 浏览器 html

本文链接：https://blog.csdn.net/codeshark/article/details/2626801

版权

Div+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

说明：有些单用户博客系统就是采用“二列右列宽度自适应布局”，也就是固定左栏，右栏根据浏览器窗口大小自适应。

方法：左栏设置固定width值，右栏不浮动也不设置宽度值即可。

<!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=utf-8" />

<title>二列右列宽度自适应布局</title>

<style type="text/css">

#left{background-color:#cccccc;border:2px solid #333333;width:110px;height:300px;float:left;}

#right{background-color:#cccccc;border:2px solid #333333;height:300px;}

/*右栏不设置任何宽度并且右栏不浮动即可实现右列自适应布局*/

</style>

</head>

<body>

<div id="left"></div>

<div id="right"></div>

</body>

</html>

优惠劵

codeshark

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
二列右列宽度自适应布局

说明：有些单用户博客系统就是采用“二列右列宽度自适应布局”，也就是固定左栏，右栏根据浏览器窗口大小自适应。方法：左栏设置固定width值，右栏不浮动也不设置宽度值即可。二列右列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:110px;height:30
复制链接

扫一扫