左右布局,左边定宽,右边自适应。

  左右布局,左边固定宽度,右边自适应。

  自己整理的几种方法:

  页面布局如下:

  

  方法1: 左边定位,右边添加marge-left

  .div1{ width: 300px; height: 600px; background: black; position: absolute;

  .div2{height: 600px; min-width: 100px; background: red; margin-left: 300px}

  方法2: 左边定为,右边定位(设置left)

  .div1{ width: 300px; height: 600px; background: black; position: absolute;}

  .div2{height: 600px; min-width: 100px; background: red; position: absolute; left: 300px; }

  方法3:左边浮动 右边浮动(右边width设置为calc(100% - 300px); 必须有空格)

  .div1{ width: 300px; height: 600px; background: black; float: left; }

  .div2{height: 600px; width: calc(100% - 300px); background: red; float: left; }

  方法4: 左边浮动 右边设置overflow:auto

  .div1{ width: 300px; height: 600px; background: black; float: left; }

  .div2{ height: 600px; min-width: 200px; background: red; overflow: auto; }

  方法5: 左边浮动 右边添加 marge-left

  .div1{ width: 300px; height: 600px; background: black; float: left; }

  .div2{ height: 600px; min-width: 200px; background: red; marge-left:300px; }

  效果图:

  

  

时间: 2024-07-28 22:07:31

左右布局,左边定宽,右边自适应。的相关文章

左边定宽 右边自适应的写法

<html><head> <title>左边定宽 右边自适应</title> <meta charset="utf-8"> <style type="text/css"> .left{float: left;width: 200px;margin-right: -100%} .content{float: left;width: 100%;} .contentInside{margin-left

左边定宽右边自适应布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 300px; } .main { box-sizing: bord

俩列布局(左边固定,右边自适应),等高布局,最小高度

俩列布局(左边固定,右边自适应): 1. <!DOCTYPE html> <html> <head> <title>俩列布局</title> <meta charset="utf-8"> <style type="text/css"> *{         margin: 0;         padding: 0;     } #left {         float: left

圣杯布局(定宽与自适应)

圣杯布局小结 阅读目录 1. 从2个实际的需求说起 2. 圣杯布局的传统实现方法 3. 圣杯布局传统实现方法的一种变体 4. 圣杯布局的纯浮动实现 5. 圣杯布局的flex实现 7. 结束语 圣杯布局,很久之前就听过,但是一直都没详细了解过,最近因为做了一个项目,借鉴了薪人薪事这个公司的产品页面,才第一次用到这种布局方式.于是就花了点时间,测了下它实现常见分栏布局的代码,每段代码都非常简单,但布局效果很完美,比我以前用的方式好用不少.本文是对它实现方式的一些总结,希望可以把这种技术推荐给跟我之前

flex布局左边固定,右边自适应,右边内容超出会影响布局

左侧宽度固定,右侧自适应 1 .left-div{ 2 width: 200px; 3 } 4 .right-div{ 5 flex: 1; 6 } 右边内容超出的话,就会导致左边固定的宽度大小不起重要了,这时只需要加上min-width: 0;就可以了 .right-div{ flex: 1; min-width: 0; } 至于为什么,愣是看不懂.... 原文地址:https://www.cnblogs.com/jonie-wong/p/11671210.html

CSS基础布局--居中对齐,左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left">Left sidebar</div> <div id="content">Main Content</div> CSS Code <style type="text/css"> *{ margin: 0; pad

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计