切图布局知识点（三）——左右布局

在css布局中，我们在很多情况下需要一变随浏览器宽度变动而变动

左侧固定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
  html,body{
    height: 100%;
  }
  .left {
    float: left;
    width: 80px;
    height: 100%;
    background-color: red;
  }
  .right{
    height: 100%;
    margin-left: 80px;
    background-color: blue;
  }
  </style>
</head>

<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

</html>

右侧固定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
  html,body{
    height: 100%;
  }
  .right{
    float: right;
    width: 80px;
    height: 100%;
    background-color: red;
  }
  .left {
    height: 100%;
    margin-right: 80px;
    background-color: blue;
  }
  </style>
</head>

<body>
  <div class="right"></div>
  <div class="left"></div>
</body>

</html>

时间： 2024-08-22 23:26:06

切图布局知识点（三）——左右布局的相关文章

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

三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*三列的布局样式*/ /*position:absolute定位*/ .left2{width:200px;height:500px;background:#f0f;position:abs

div+css两列布局与三列布局

一.两列布局: 1.左边定宽,右边自适应. 方法一:采用position:absollute;并设置margin-left的值. 例: #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="

经典的两栏布局和三栏布局的几种简单的实现

一,三栏布局 1,两边栏宽度固定值,中间栏宽度自适应 (1)绝对定位法 [关键点]1,绝对定位从普通文档流中脱离出来,中间元素可以不用考虑左右定位元素占的位置 2,左右栏绝对定位到确定的位置上,(absolute,left,right) 3,中间栏左右外边距设置为左右栏的宽度,因此自身宽度就自适应的变成了窗口宽度-左右两边栏的宽度 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 mar

CSS 常见两列布局、三列布局

一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="right">右

圣杯布局（三栏布局）

圣杯布局也就是:左右固定宽度,中间自适应的布局样式 HTML布局: 注意:一定是中间部分写在最上面 <header><h4>header内容</h4></header> <div class="container"> <div class="middle"><h4>中间弹性</h4></div> <div class="left"&g

两列布局、三列布局以及等高布局

在了解布局之前,需要先掌握BFC.margin折叠.这里简单对这两个概念做介绍. 1.BFC(block formatting contents),块级格式上下文. 产生条件: 跟元素: 浮动或者定位包括absolute和fixed: overflow不为visiable: display为inline-block, table-cell, table-caption, flex, inline-flex. 特性: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin

CSS实现左右布局，三栏布局

css的两栏布局是比较经典的布局之一,一般是左(右)边定宽,右(左)边自适应. 实现的方式也比较多,今天主要介绍3种. 1.浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上 <body> <div class="left">左边</div> <div class="right">右边</div></body> .left { width: 200px; height: 400px

转：CSS布局：Float布局过程与老生常谈的三栏布局

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

经典三栏布局之圣杯、双飞翼、弹性布局

经典三栏布局之圣杯.双飞翼.弹性布局圣杯布局和双飞翼布局是前端工程师需要掌握的布局方式,两者功能相同,都是为了实现两侧宽度固定,中间宽度自适应的布局方式,此外,使用新增的flex布局,可以使布局更加简单. 双飞翼布局和圣杯布局虽然实现方式有所差异,但是基本上都遵循了以下几点: 两侧宽度固定,中间宽度自适应中间结构在DOM上优先,以便于优先渲染下面依次介绍圣杯布局.双飞翼布局.弹性布局实现三栏布局圣杯布局一.搭建主体结构我们先搭建主体框架,将主体结构写出来 <div class="

做一个会PS切图的前端开发

系列链接做一个会使用PS的前端开发做一个会PS切图的前端开发切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方