布局一 两列自适应布局

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>两列自适应布局</title>
          <style type="text/css">
　　　　.out{
　　　　　　width: 90%;
　　　　　　height: 500px;
　　　　　　margin: 0 auto;
　　　　　　background: yellow;
　　　　　}
　　　　.left{
　　　　　　width: 20%;
　　　　　　background: blue;
　　　　　　float: left;
　　　　　　height: 500px;
　　　　　}
　　　　.right{
　　　　　　width: 80%;
　　　　　　background: red;
　　　　　　float: left;
　　　　　　height: 500px;
　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="out">
　　　　　　<div class="left"></div>
　　　　　　<div class="right"></div>
　　　　</div>
　　</body>
</html>

时间： 2024-07-28 22:16:30

布局一 两列自适应布局的相关文章

css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）

1.两列自适应 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> #left{float: left;background: #ccc;height: 40

css 两列自适应布局的4种思路

前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl

两列自适应布局

目的: 想要在网页中实现自适应两列布局,即左边一列是固定宽度的,右边一列的宽度等于屏幕宽减去左边的宽度(或相反). 分析: 需要满足三个要求: ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法(不考虑绝对定位): 组合起来,会有很多种实现方式. 方法: <div class="left"></div> <div class="main"></div> 1.floa

CSS两列自适应布局

两列布局,一边固定,一边自适应,很常见,可不见得都能写好,就像我. 在一通搜索后,总结了几种方法. 1.CSS3 Flex-Box 其实我最早知道的是这种方法,之前也记录过. 弹性方框模型 (Flexible Box Model)笔记 2.来自div+css自适应两列布局,一列定宽,一列自适应 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Doc

慕课笔记利用css进行布局【两列布局】

<html> <head> <title>两列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*两列的布局样式*/ /*float:left向左浮动*/ .content{width:920px;margin:0 auto} .left{width:20%;height:500px;background:#f00;fl

使用em为单位制作两列弹性布局

一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布局. 固定宽度布局是将宽度用像素单位定义,它的宽度总保持不变,也被成为“冰布局”. 它的缺点是由于宽度固定,无论浏览器窗口尺寸有多大,它的尺寸也不变,无法充分利用空间. 当浏览器窗口变小时,会出现水平滚动条.这些缺点可以用其他两种布局方法解决. 流体布局的单位是用百分比控制的,不是像素.这使流体布局

水平方向两列三列自适应布局

<html> <!--三列水平居中--> <div style="float:right;background-color:blue;width:100px;height:100px;"></div> <div style="float:left;background-color:lightgray;width:100px;height:100px;"></div> <div style=

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.