精华内容
下载资源
问答
  • div 宽度 自适应

    2010-08-31 22:55:32
    div 宽度 自适应   ------ 解决方法: ...* 宽度自适应div: * 写在 3个div的最后面,比 float:right 的 div 还靠后, * 不定义 width 属性,或者定义为 width:auto; * 不定义 floa...

     

    div 宽度 自适应

     

    ------

    解决方法:

     

    * 显示在左侧的div使用 float="left"

    * 显示在右侧的div使用 float="right"

    * 宽度自适应的 div:

    * 写在 3个div的最后面,比 float:right 的 div 还靠后,

    * 不定义 width 属性,或者定义为 width:auto;

    * 不定义 float 属性,或定义为 float:none;


    ------
    例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    body {margin: 0 auto;text-align: center;}
    #container {text-align: left;background-color: green;}
    #top {height: 160px;background-color: red;}
    #middle {height: 240px;background-color: yellow;}
    #middle_left {height:240px;width: 200px;float: left;background-color: #333;}
    #middle_right {height:240px;width: 220px;float: right;background-color: #ddd;}
    /* 自适应宽度的 div:1.不要设置 width,即 width:auto ,2.不要设置 float,即 float:none,3.其div的位置应放在最后,比 float='right' 的 div 还靠后*/
    #middle_center {height:240px;background-color: #aaa;}
    #foot {height: 120px;background-color: teal;}
    .clearDiv {clear:both;}
    </style>
    </head>
    <body>
    	<div id="container">
    		<div id="top">top</div>
    		<div class="clearDiv"></div>
    		<div id="middle">
    			<!-- 居左 -->
    			<div id="middle_left">middle left</div>
    			<!-- 居右 -->
    			<div id="middle_right">middle right</div>
    			<!-- 自适应宽度的 div 应放在最后 -->
    			<div id="middle_center">middle center</div>
    		</div>
    		<div class="clearDiv"></div>
    		<div id="foot">foot</div>
    	</div>
    </body>
    </html>
      
    ------
    一点问题:

    ie6 下 float 元素的空隙 问题:

    解决方案: 
    float:left; _margin-right:-3px;
    float:right;时 _margin-left:-3px;



     

    展开全文
  • div宽度自适应

    2015-04-23 11:36:45
    实现效果:3个水平div 两旁div宽度固定 中间自适应 做法:1.将3个div仍在一个div(父元素)里面,父元素width:100% 且父元素的padding-left 和padding-right: 值等于3个子div中需要固定宽度的div 的宽度  2.

    实现效果:3个水平div 两旁div宽度固定 中间自适应


    做法:1.将3个div仍在一个div(父元素)里面, 3个div设置水平向左浮动。

                        父元素width:100% 且父元素的padding-left 和padding-right: 值等于3个子div中需要固定宽度的div 的宽度

                2.调整左边div(1)的左边距为适当的负数值,让它偏移到父元素的左边padding-left区域

                3.调整右边边div(3)的右边距为适当的负数值,让它偏移到父元素的右边padding-right区域

                4.中间div 设置宽度为100%


    关键:设置父元素的左右内边距,把需要适应的div做为子元素仍在父亲里面调整宽度100%,

                需要固定的div作为子元素仍在父亲的左右内边距区域。

            

    展开全文
  • div宽度自适应内容

    2020-08-16 11:46:44
    div宽度自适应内容 width: fit-content; width: -webkit-fit-content; width: -moz-fit-content; 高度同理将width换成height即可,高度其实本身就是自适应内容的,多数情况不设置,但是在做一些交互效果的时候需要...

    div宽度自适应内容

    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    高度同理将width换成height即可,高度其实本身就是自适应内容的,多数情况不设置,但是在做一些交互效果的时候需要设置

    展开全文
  • 如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何...

    如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何实现。

    我们经常会看到这样的页面,左侧(或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小,这其实就是宽度自适应的实现。

    css宽度自适应中最常见的实现方法有两种,一种是两列布局,另一种是三列布局

    下面我们就来对这两种方法分别简单介绍一下。

    一. css宽度自适应之两列布局:

    我们以右侧宽度固定,左侧宽度自适应为例:

    1、固定宽度区浮动,自适应区不设宽度而设置 margin

    自适应区
    #sidebar {

    float: right; width: 300px;

    }#content {

    margin-right: 300px;

    }

    注意:

    右侧一直固定不动,左侧根据屏幕的剩余大小自适应。

    但实际上这个方法是有局限性的,那就是html结构中sidebar必须在content之前才行。

    2、float与margin配合使用

    自适应区

    固定宽度区
    #content {

    margin-left: -300px; float: left; width: 100%;

    }#content .contentInner{

    margin-left:300px;

    }#sidebar {

    float: right; width: 300px;

    }

    说明:这样实现,contentInner的实际宽度就是屏幕宽度-300px。

    3、固定宽度区使用绝对定位,自适应区设置margin

    我现在的结构是在前面
    固定宽度区
    #wrap{

    position:relative;

    }#content {

    margin-right:300px;

    }#sidebar {

    position:absolute;

    width:300px;

    right:0;

    top:0;

    }

    4、使用display:table实现

    我现在的结构是在前面
    固定宽度区
    #wrap{

    display:table;

    width:100%;

    }#content {

    display:table-cell;

    }#sidebar {

    width:300px;

    display:table-cell;

    }

    注意:这一种方法在IE7以及以下浏览器不兼容,因为IE7设置display为table不识别。

    二. css宽度自适应之三列布局:

    1、固定宽度三列布局

    left
    middle
    right
    *{

    padding: 0;

    margin: 0;

    }

    .div0{

    width: 800px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    margin: 50px auto;

    border: 2px solid #E51414;/*添加边框只为结果更直观*/

    }

    .left{

    width: 200px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #6E6C8A;

    float: left;/*设为左浮动*/

    text-align: center;

    }

    .middle{

    width: 430px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #806155;

    float: left;/*设为左浮动*/

    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/

    text-align: center;

    }

    .right{

    width: 150px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #8F9068;

    float: right;/*设为右浮动*/

    text-align: center;

    }

    2、左右固定宽度、中间自适应宽度的三列布局

    left
    middle
    right

    *{

    padding: 0;

    margin: 0;}

    /*.div0{

    width: 800px;

    height: 500px;

    margin: 50px auto;

    position: relative;

    border: 2px solid #E51414;

    }

    可以不要这个父元素div0(即默认父元素为body),如果有,需将这个父元素设置为相对定位*/

    .left{

    width: 200px;

    height: 500px;

    background: #6E6C8A;

    position: absolute;

    top: 0; l

    eft: 0;

    /*设为绝对定位并且与其父元素的top、left距离都为0*/

    text-align: center;

    }

    .middle{

    height: 500px;

    background: #806155;

    margin: 0 160px 0 210px;

    /*左右各加10px使得三列之间有间隙*/

    text-align: center;

    }

    .right{

    width: 150px;

    height: 500px;

    background: #8F9068;

    position: absolute;

    top: 0;

    right: 0;

    /*设为绝对定位并且与其父元素的top、right距离都为0*/

    text-align: center;

    }

    说明:当左右两个div宽度固定,中间的div宽度未知时,使用浮动不能实现三列布局。使用绝对定位才能实现三列布局:需要将左边和右边的元素设置为绝对定位,将中间的元素margin值的左右分别设置为右边元素和左边元素的宽度。不需要父元素的包裹,即可实现三列布局,如果有父元素,需要将父元素设置为相对定位。(关于定位的内容可以参考css手册)

    相关推荐:

    展开全文
  • div宽度自适应布局(左边自适应)
  • div宽度自适应布局(右边自适应)
  • <div class="box">测试文字<...div宽度自适应文字内容 直接用css3的fit-content .box{ border: 1px solid red; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content; }
  • CSS布局-DIV宽度自适应

    2013-10-23 16:21:55
    经常布局网页,什么情况都会碰到,比如这多个DIV宽度自适应,也就是做液态布局,具体要用到“负值外补侗法(negative margins)。本示例如果你搞懂,你可以解决大多布局问题,这是总一行三列的布局,中间列分三行,...
  • xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应。 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft">左栏固定宽度为200px</div> 2 <div class="dyright">右栏...
  • css实现div宽度自适应,宽高保持等比缩放1、方式一2、方式二3、方式三4、方式四 1、方式一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...
  • css+div宽度自适应实例代码 1.两列固定宽度的布局: css如下: .left{width:300px;height:300px;backgroud:#DEF0BE;float:left;} .right{width:300px;height:300px;backgroud#99CC00;float:left;} 2.两列,...
  • div class="band-bg" style="padding: 0 5px;"> <span >{{ 天猫国际 }}</span> </div> .mall-bg{ text-align: center;width:fit-content;width:-webkit-fit-content;width:-moz-fit-...
  • 【react踩坑】设置div宽度自适应

    千次阅读 2019-09-11 10:54:05
    现在需要每页只显示5个tab标签,每个tab标签宽度自适应。 实现思路: 监听包裹tabs的div组件的宽度变化,动态设置每个tabs的宽度为当前外部div宽度的1/5。 方法一: const element = document....
  • 方法1:对两边div设置宽高绝对定位,中间div设置高和外边距margin html: <div class="div1"></div> <div class="div2"></div> <div class="div3"><...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法</title> <style typ...
  • [ CSS ] div宽度自适应!

    千次阅读 2014-03-24 14:07:07
    偶尔朋友得一题目,关于div宽度自适应. 原文出处:http://chaoqunz.blog.163.com/blog/static/6154877720096308422202/ 感谢原创作者! 1.宽度自适应的条件 自适应宽度的层不要指定宽度和float属性 自适应宽度的层...
  • 直接用css3的fit-content: width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;
  • http://www.zhihu.com/question/37208845 <!... <title></title> body{ padding: 0px;...<div class="wrap"> <div id="dv1"></div> <div id="dv2"></div> </div> <div class="wrap2"></div>
  • <!...<...<head><meta charset="utf-8"><...左边div固定,右边div自适应</title><style> *{ margin:0;padding:0; } .left{ width:200px; height:400px; backgro...
  • 直接用css3的fit-content: width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;
  • .main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>61...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,214
精华内容 885
关键字:

div宽度自适应