精华内容
下载资源
问答
  • 长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。下面我们来做一个三栏液态布局(three-column liquid layout)首先 Body 和 外框 的代码:body{margin:0;padding:...

    be45eb6c5fd66d11a803e0291ef8bfd0.png

    长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。

    下面我们来做一个三栏液态布局(three-column liquid layout)

    首先 Body 和 外框 的代码:

    body{margin:0;padding:0px;text-align:center;}

    #wrap{margin:0 auto;text-align:left;}

    三栏的代码分别如下:

    /*左边栏,固定宽度*/

    .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}

    /*中间栏,自适应宽度*/

    .wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}

    /*右边栏,固定宽度*/

    .wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}

    到这里,框架已经完成,以下是完整代码:

    [示例] div + css 创建自适应宽度布局(液态布局)- Abloxo.com | Oeye.cn

    这是左边部分

    这是左边部分

    这是左边部分

    这是右边部分

    这是右边部分

    这是右边部分

    这是中间部分

    中间的左边

    中间的右边

    这是中间部分

    展开全文
  • 独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV布局。通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的...

    独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧。

    关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度。

    关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度。

    实例CSS代码:

    复制代码代码如下:

    .box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}

    说明:这里设置宽度为60%,为了便于观察到效果,所以给予设置高度和红色边框,因为考虑到独立设置一个DIV盒子一般居中的,所以设置margin:0 auto

    完整的HTML源代码(包括HTML和CSS):

    复制代码代码如下:

    独立一个宽度自适应实例

    .box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}

    内容

    实例效果截图:

    7fd219790059d79f600e2a7887ed9cb3.png

    以上是独立一行自适应宽度完整实例。

    DIVCSS5扩展思维认识:

    1、在一般网页布局中,一般主体内容都是固定宽度,所以具体设置宽度都是按照美工图确定获得,但有时也不排除宽度是自适应的这个时候就不能设置固定宽度样式。

    2、在局部DIV CSS布局中,因为对最外层都设置具体宽度,而独行的子级有时就不需要设置宽度样式,这样默认DIV宽度就是100%,假如一个对象设置宽度固定后,而子集不设置宽度而设置paddding-left或padding-right(或者两个都设置)这个时候浏览器解释呈现这个子集DIV宽度依然会非常智能地用总宽度去减去padding占用宽度。一般情况布局局部时,独行一列的DIV只要不使用浮动都可以不用设置具体宽度或百分比宽度,因为浏览器都会根据此层父级而智能处理宽度。

    展开全文
  • 青岛星网下面写了一个简单的:div+css全屏自适应布局范例代码给大家参考学习。div+css全屏自适应布局HTML代码div+css全屏自适应布局CSS代码/* 全屏自适应布局 */html,body{width:100%;height:100%;overflow:hidden;...

    本文主要跟大家分享全屏自适应布局应该怎么写?青岛星网下面写了一个简单的:div+css全屏自适应布局范例代码给大家参考学习。

    c9c0d9b1fbbb35fea1cd0235117f4199.png

    div+css全屏自适应布局HTML代码

    div+css全屏自适应布局CSS代码/* 全屏自适应布局 */

    html,body{width:100%;height:100%;overflow:hidden;margin:0;}

    html{_height:auto;_padding:100px 0 50px;}

    .g-hd,.g-sd,.g-mn,.g-ft{position:absolute;left:0;}

    .g-hd,.g-ft{width:100%;}

    .g-sd,.g-mn{top:100px;bottom:50px;_height:100%;overflow:auto;}

    .g-hd{top:0;height:100px;}

    .g-sd{width:300px;}

    .g-mn{_position:relative;left:300px;right:0;_top:0;_left:0;_margin-left:300px;}

    .g-ft{bottom:0;height:50px;}

    展开全文
  • 一个客户说要用DIV+CSS布局,两列,其中导航列宽度不确定(由里面的TreeView控件确定),而与它并列的内容列宽度要做到自适应,也就是内容列宽度+导航列宽==固定值(总宽度)但是,内容列宽度 和 导航列宽 都没有一个定...

    5268f80b9b1e01f982625ef6fac83ca1.png

    一个客户说要用DIV+CSS布局,两列,其中导航列宽度不确定(由里面的TreeView控件确定),而与它并列的内容列宽度要做到自适应,也就是

    内容列宽度+导航列宽==固定值(总宽度)

    但是,内容列宽度 和 导航列宽 都没有一个定值,而网上的大多自适应列宽代码都是基于一个定值的

    无奈,我写Winform出身的对CSS+DIV知之甚少,只能通过JavaScript来完成了,效果还可以,IE7.0和Firefox2.0测试通过

    下面的代码中,导航列没有定义宽度,其实际宽度要靠里面的内容而确定:

    效果图,右边为导航列(不习惯吧,呵呵,客户阿拉伯的):

    < html >

    < head >

    < title > title >

    < script type ="text/javascript" >

    window.onload = function (){

    document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) + " px " ;

    }

    script >

    < style type ="text/css" >

    body

    {

    background : #999 ;

    text-align : center ;

    color : #333 ;

    font-family : Verdana, Arial, Helvetica, sans-serif ;

    margin : 0px ;

    }

    #header

    {

    margin-right : auto ;

    margin-left : auto ;

    padding : 0px ;

    width : 776px ;

    background : #EEE ;

    height : 60px ;

    text-align : left ;

    }

    #contain

    {

    margin-left : auto ;

    margin-right : auto ;

    width : 776px ;

    }

    #mainbg

    {

    float : left ;

    padding : 0px ;

    width : 776px ;

    background : #60A179 ;

    }

    #right

    {

    float : right ;

    margin : 2px 0px 2px 0px ;

    padding : 0px ;

    background : #ccd2de ;

    min-height : 300px ;

    _height : 300px ;

    text-align : left ;

    }

    #left

    {

    float : right ;

    margin : 2px 2px 0px 0px ;

    padding : 0px ;

    background : #F2F3F7 ;

    width : 574px ;

    min-height : 600px ;

    _height : 600px ;

    text-align : left ;

    }

    #footer

    {

    clear : both ;

    margin-right : auto ;

    margin-left : auto ;

    padding : 0px ;

    width : 776px ;

    background : #EEE ;

    height : 60px ;

    }

    .text

    {

    margin : 0px ;

    padding : 20px ;

    }

    style >

    head >

    < body >

    < div id ="header" >

    header with height of 60px

    div >

    < div id ="contain" >

    < div id ="mainbg" >

    < div id ="right" >

    < div class ="text" >

    < p >

    put your tree here p >

    div >

    div >

    < div id ="left" >

    < div class ="text" >

    the width of this div is dependent on the right div

    left < br />

    left < br />

    left < br />

    left < br />

    div >

    div >

    div >

    div >

    < div id ="footer" >

    footer

    div >

    body >

    html >

    另外,修改之前的原始代码是我收藏的,好像网上copy很多,也不知道哪里才是原始出处了,尽管做了扩充和修改,但还是应该注明一下,如是您是原作者,请联系我blodfox777@hotmal.com

    1428d0e076c3959ab11d28a39bc84fab.png

    5268f80b9b1e01f982625ef6fac83ca1.png

    本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

    本文系统来源:php中文网

    展开全文
  • 特效描述:div+css菜单 导航条布局 自适应宽度。div+css布局制作导航菜单,设置导航条自适应宽度效果,导航匹配自定义宽度大小。代码结构1. HTML代码*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}....
  • div宽度自适应布局(左边自适应)
  • CSS+DIV自适应布局1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满)代码如下:左右两侧,左侧固定宽度200px;右侧自适应占满.box{width:800px;height:300px;margin:0 auto;}.left{width:200px;height:300px;...
  • 第一种方法:BFC块级格式化上下文-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------.container1{ width:100%; height:100px; border:1px ...
  • div左右自适应布局

    2020-11-04 19:54:34
    div左右自适应布局
  • 页面结构如下: <div class="container"> <div class="left"> left </div> <div class="right"> right </div>.../div>... 需要这样的效果:左右两边...
  • 如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何...
  • 在css我们经常用到固定头部和底部,...具体可以网上去搜,这样可以完成上中下的布局,但是这次基础上再做左右布局浮动会出现问题,具体什么问题我没有深究。查阅一些资料后,发现了css的display属性有个table值,...
  • DIV+CSS实现自适应表格布局

    千次阅读 2020-04-03 16:37:20
    DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"&...
  • HTML,使用div+css实现自适应table布局

    万次阅读 2016-07-30 18:16:26
    简单的table布局:  1:使用 box-sizing以便于使用100%;  2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度  3:使用margin,padding,保证一个单元格拥有最小高度。避免空的单元格。...
  • 独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV布局。通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的...
  • div + css宽度自适应(液态布局

    千次阅读 2014-03-31 14:44:53
    原文地址:http://www.cnblogs.com/anncesky/articles/2633046.html div + css宽度自适应(液态布局) /*左边栏,设定宽度*/ .wrap_l { float: left; width: 150px;
  • 长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。 下面我们来做一个三栏液态布局(three-column liquid layout) 首先 Body 和 外框 的代码: body{...
  • 自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,由于事先不知道具体高度,只能根据内容的增减自适应高度,很多情况下要求两列(或三列)Div的高度相同,以前用 Table 很容易实现,但采用 Div + CSS 就显得...
  • 我们一般讨论的自适应高度的DIV布局,都是指有背景区分的,但在我们的实际应用中,很少有网站这么用的,大多数都不是用背景区分的。但今天我们并 不是讨论它的实用性如何,而只讨论实现这种布局的一种较完美的解决...
  • <...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ...
  • 众所周知现在不管是前台还是后台都提倡采用DIV+CSS布局,至于这样左右什么好处这里不做阐述,Google 一下就能找到一大堆资料。Leeo 本人也比较喜欢DIV布局,并且一直在各个项目中努力由表格布局转向DIV+CSS布局。 ...
  • 实现两个div,左边固定div宽度200px,右边div自适应 /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">Equal height(DIV+CSS布局自适应高度的解决方法)body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial, ...
  • 1、头部不固定,底部高度自适应 使用flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
  • div多栏自适应布局

    2010-08-12 15:13:00
    这里就简单谈谈几个自己碰到过的自适应问题。1、两栏自适应布局在实际项目中,常常遇到如红色线框部分的两栏自适应问题。其关键点是,左右两栏均不定宽,右侧栏条目数量不定。针对这种场景,可以采用两栏均浮动的...
  • 布局自适应

    2015-01-19 10:49:00
    当我们要给一个页面自适应,所有的都要用上百分比的时候,往往给最外面div加百分比时无效,究其原因是它是相对父级的,外层(父级)的元素必须指定height(百分比) <html xmlns=...
  • div 全屏自适应 布局

    千次阅读 2010-06-27 12:10:00
    来自:http://www.desteps.com/design/layout/539.html<br />  <!-- Put IE into quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
  • DIV+CSS自适应布局

    2016-04-06 00:16:00
    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒。 效果图如下:高度自适应——宽度自适应 1,高度自适应布局 原理就是把每个...
  • 摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内设计,filesplit...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,339
精华内容 9,735
关键字:

divhtml左右布局自适应