常见的布局方法整理[兼容]

一行两列左侧固定右侧自动适应

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}  

    #content{overflow: hidden;}
        #box{height: 700px; width: 100%;background: #2ba343;float: left;}
            #right{margin-left: 300px;background: #2828d9;height: 600px;}
        #left{width: 300px; height: 600px; background:#ffc118;float: left;margin-left: -100%;}
    /*
    个人理解:用百分百单位如果左边固定的话，右边是百分之多少肯定不知道，问题来了 100%-npx？显然不可能，css不支持计算
    解决办法:
       1.box用百分百表示在最底层
        2.right给margin-left相当于向右让出300px给固定值一个位置由于固定值挡住了所以视觉上就是固定—+自定适应；
        3.结构right为什么放在右边。 如果左边放在前面在最前面 -100%没有参考对象他负浏览器里去了 放前面就是给他个参考对象让他成立
       注: content只是个结构层没有其他实际意义。 right不用浮动 因为他是box的子级层级本身就比box高浮动也还是高。
    */
</style>

</head>

<body>
    <div id="content">

        <div id="box">
            <div id="right">right</div>
            </div>
        <div id="left">left</div>

    </div>

</body>
</html>

效果：

三栏中间自动适应

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}  

    #content{overflow: hidden;}
        #box{height: 700px; width: 100%;background: #2ba343;float: left;}
            #right{margin: 0 200px 0 300px; background: #2828d9;height: 600px;}
        #left{width: 300px; height: 600px; background:#ffc118;float: left;margin-left: -100%; }
    #other{height: 600px; width: 200px; background: #f90;margin-left: -200px;float: left;}

在上一个的基础上 把right层右边让出200px

然后右边的div浮动 margin-left 写负的本身宽度就负到一行显示了

</style>

</head>

<body>
    <div id="content">

        <div id="box">
            <div id="right">right</div>
            </div>
        <div id="left">left</div>
        <div id="other">other</div>
    </div>

</body>
</html>

左边两栏右边自动适应

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}  

    #content{overflow: hidden;}
        #box{height: 700px; width: 100%;background: #2ba343;float: left;}
            #right{margin-left: 600px;background: #2828d9;height: 600px;}
        #left{width: 600px; height: 600px; background:#ffc118;float: left;margin-left: -100%;}
    #left1{float: left;height: 600px; width: 300px; background:#2aa1eb;}
    #left2{float: left;height: 600px; width: 300px; background:#ea541e;}

在left中插入两个div
</style>

</head>

<body>
    <div id="content">

        <div id="box">
            <div id="right">right</div>
            </div>
        <div id="left">left
        <div id="left1"></div>
            <div id="left2"></div>
        </div>

    </div>

</body>
</html>

右边固定左边自动适应

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}  

    #content{overflow: hidden;}
        #box{height: 700px; width: 100%;background: #2ba343;float: left;}
            #right{margin-right: 300px;background: #2828d9;height: 600px;}
        #left{width:300px; height: 600px; background:#ffc118;float: left;margin-left:  -300px;}

给right右边留出300px 也就是div宽度 然后 用负值负到一行  就ok
</style>

</head>

<body>
    <div id="content">

        <div id="box">
            <div id="right">right</div>
            </div>
        <div id="left">

        </div>

    </div>

</body>
</html>

常见的布局方法整理[兼容],布布扣,bubuko.com

时间： 2024-08-06 07:57:14

常见的布局方法整理[兼容]的相关文章

结合CSS3的布局新特征谈谈常见布局方法

写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局在拿到设计稿时,作为一个前端人员,我们首先会做的应该是为设计图大致地划分区域,然后选择一种最合理的,结构清晰的布局.下面我先根据一些典型的网站案例列举一下几种常见的页面布局. T型布局这个是我们比较常见的布局,其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容. Segmentfau

CSS常见布局问题整理

实现div的水平居中和垂直居中多元素水平居中实现栅格化布局 1. 实现div的水平居中和垂直居中实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来主要思路其实就是使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高)) 使用flex属性使用tranfrom做相对位移的调节 1) 只适用: 宽高已定设置position: absolute(父元素记得设置: relative), 然后t

Java web 常见对象的取值方法整理

一.从request中取值: 1.取param: servlet: request.getParameter() request.getParameterValues() jsp脚本:request.getParameter() request.getParameterValues() jstl/el: ${param.name} ${paramaValues.names[0]} struts ognl:<s:property value="#parameters.ParamName[

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

CSS垂直居中布局方法

整理一下个人认为比较好的CSS垂直居中的布局方法. 1. 绝对定位+负值margin. //长宽的设置只是为了说明,实际使用没有限制 <div id="container-outer"> <div id="container-inner"></div> </div> //CSS #container-outer { width: 200rem; height: 100rem; position: relative; }

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将

常见数据结构与算法整理总结（上）

数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.算法是为求解一个问题需要遵循的.被清楚指定的简单指令的集合.下面是自己整理的常用数据结构与算法相关内容,如有错误,欢迎指出. 为了便于描述,文中涉及到的代码部分都是用Java语言编写的,其实Java本身对常见的几种数据结构,线性表.栈.队列等都提供了较好的实现,就是我们经常用到的Java集合框架,有需要的可以阅读这篇文章.Java - 集合框架完全解析一.线性表 1.数组实现 2.链表二.栈与队列三.树

几个常见的布局的多种实现方式及margin负值总结

第一部分:几个常见的布局实现方式一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"&g

Android中ListView的几种常见的优化方法

Android中的ListView应该算是布局中几种最常用的组件之一了,使用也十分方便,下面将介绍ListView几种比较常见的优化方法: 首先我们给出一个没有任何优化的Listview的Adapter类,我们这里都继承自BaseAdapter,这里我们使用一个包含100个字符串的List集合来作为ListView的项目所要显示的内容,每一个条目都是一个自定义的组件,这个组件中只包含一个textview: Activity: package com.alexchen.listviewoptimi