等高左中右结构

原理： “margin-bottom:-1000px;”和“padding-bottom:1000px;”


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<style type="text/css">

body{margin:0;}

#all{

    width:700px;

    margin:0 auto;

    overflow:hidden;

}

#left,#center,#right{

    margin-bottom:-1000px;

    padding-bottom:1000px;

}

#left{

    float:left;

    width:200px;

    

}

#center{

    float:left;

    width:300px;

    

}

#right{

    float:left;

    width:200px;

    

}

</style>

<body>

<div id="all">

    <div id="left">

    <p>left</p>

    <p>left</p>

    <p>left</p>

    <p>left</p>

    <p>left</p>

    </div>

    <div id="center">333</div>

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

</div>

 

等高左中右结构,布布扣,bubuko.com

时间： 2024-08-04 07:30:35

等高左中右结构的相关文章

css布局之左中右结构总结

结构说明:左右两部分宽度固定,中间的部分填充剩余所有宽度.常用场景:最左边摆放一张图片,中间摆放说明性文字,右边摆放相关操作的小图标.之前的做法虽然有实现但是不完美.思路如下(简单描述为左中结构):首先考虑中间的要拉伸铺满剩下的宽度,必须宽度设置成百分比100%,用box-sizing设置为border-box,然后配合padding,给左右留固定的宽度,左右的内容放到padding区域与其重叠,使用float浮动是不能重叠的,所以一定要有一个是绝对定位,全部都使用绝对定位是没有问题的,但是绝对

左中右布局经典案例

<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style type="text/css"> body{margin: 0px;} #divLeft{width:100px;height:800px

小程序UI设计（7）-布局分解-左-上下结构

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列.第一个WViewColumn中放一个图片,第二个放两张图片.如下图展开的结构树. 下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解. flex-direction=column说明内部组件主轴x是从上而下.flex-wrap在本工具中对于column类型的不起作用.此处

高通camera结构【转】

本文转载自:http://www.cnblogs.com/whw19818/p/5853407.html 摄像头基础介绍 一.摄像头结构和工作原理. 拍摄景物通过镜头,将生成的光学图像投射到传感器上,然后光学图像被转换成电信号,电信号再经过模数转换变为数字信号,数字信号经过DSP加工处理,再被送到电脑中进行处理,最终转换成手机屏幕上能够看到的图像. 数字信号处理芯片DSP(DIGITAL SIGNAL PROCESSING)功能:主要是通过一系列复杂的数学算法运算,对数字图像信号参数进行优化处理

学习 《构建高并发网站结构》记录

一,大型网站的特点: 1,并发数量高,访问量大. 2,处理的数据大(上1势必造成如下) 3,用户分布广泛,网络环境复杂. 4,稳定性高. 5,易于扩展. 6,安全性高. 二,大型网站的基础设施 1,服务器介绍 1.1,塔式服务器 :外形与普通pc机差不多,个头相对大一点.特点,插槽多,扩展性强,常用于入门级和工作组级别的服务器,不过相对占空间. 1.2,机架式服务器:宽度为19英寸,高度以U为单位(1U=1.75英寸=44.45毫米) 这种服务器占用空间小,可以将多台服务器装到1个机柜上,方便统

DIV 布局 左中右

<style type="text/css">body{ margin:0; padding:0;}.Header{ height:100px; background:red;}.Left{ float:left; width:200px; height:300px; background:yellow;}.Right{ float:right; width:200px; height:300px; background:green;}.Center{ margin:0 2

Android - 常见的控件布局，左中右，左右等

这里汇总的是自己在工作过程中,使用过的常见空间布局,记录在这里.详情如下: 1. 三个控件,分别处于左,中,右 要点:使用RelativeLayout 1 <RelativeLayout 2 android:layout_width="match_parent" 3 android:layout_height="wrap_content" 4 android:orientation="horizontal"> 5 <TextVi

中山企业高端网站结构建设的主要因素

其实对于网站设计越简单越好,大家往往会想得那么的复杂,是因为网站策划没有做到位,下面大熊小编和大家讲一下高端网站设计的设计要点,首先我们要保证我们的网站设计易于阅读,网站设计易于阅读不单单是指内容,对于视觉设计以及布局格局上也是需要注意的.这里就涉及到了我们的文章标题高端网站设计的设计要点. 首先,我们要保证网站的背景以及文字的色彩搭配恰当.一定不可过于追求个性,或凭着自己的爱好来设计网页,我们首要考虑的就是群众的喜好以及需求.在文章的编排问题中应该把最为重要的内容放置在第一屏的位置上.同时我们

上中下布局,上下高度指定,中间自适应(左中右同理)

采用相对布局,下面的View设置属性layout_alignParentBottom:true,放在底部, 中间的View需要分别设置 android:layout_above="" android:layout_below="" 这样中间的View就自动填充中间剩下的部分,并且它的高度属性失效. 效果图: 布局文件: 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/re