css左右侧自动填充宽度布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
#div2{
float:left;
margin-left:-100%;
}
#div3{
float:left;
width:100%;
}
</style>
<div id="div1">
<div id="div3">
<div style="margin-left:240px">
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
</div>
</div>
<div id="div2">
<div style="width:240px">
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
</div>
</div>
</div>
<!---
这种布局也可以作为slide和content的布局,
1:内容的元素放在第一个结点(width:100%;float:left);
2: slide是第二个结点(float:left;margin-left:-100%)
-->
</body>
</html>

  

时间: 2024-10-05 16:07:41

css左右侧自动填充宽度布局的相关文章

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是饭的列表等等.反正挺实用,值得收藏! 先看HTML代码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" co

老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽

css判断不同分辨率显示不同宽度布局实现自适应宽度

一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄).随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户),

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

CSS设置表格TD宽度布局

使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数浏览器采用自动表格布局算法对表格布局:表格及单元格的宽度取决于其包含的内容. fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定:在当前列中,该单元格所在行之后的行并不会影响整个列宽. **注意** 使用 "fixed" 布局方式时,整个表格可以在其首行

css居然有根据容器宽度自动截取长度加省略号功能,强大!!

作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**&

CSS 布局总结——变宽度布局

变宽度布局 1-2-1 等比例变宽 总宽度设置 width: 85%; min-width: 650px; (关于IE6的min-width支持,可用) content 设置 width: 66%; float: left; side 设置 width: 33%; float: right; 增加clear 空div HTML 结构: <!DOCTYPE HTML> <html> <head> <title>1-2-1 等比例变宽</title>

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都能使用多种方法实现.但现在这个问题该怎么去解决呢. 对了这个题目,似乎不是那么好解决,毕竟像这类问题我们都是使用js或者模版辅助实现的. 这个题目难点在哪儿? 对动态添加的数据只用css实现这个效果,那就意味着除了动态添加数据外,不可能改变现有的文档结构.什么意思呢?比如对于这种实现,我们可以使用u

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F