[转贴]一个有趣的布局

尝试一下,不用定位,只用浮动,就把这个排版排出来看看。

原文:http://shawphy.com/demo/speciallayout/speciallayout.html

不要被她迷惑了,其实没你想的那么难

 

Code<!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><title>有趣的布局</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css" title="">    #wrap{width:300px;height:300px;border:1px solid black}    #a{background:gray;}    #b{background:red;}    #c{background:green;}    #d{background:blue;}    #e{background:yellow;}

#a{width:100px;height:200px;float:left;}    #b{width:200px;height:100px;float:left;}    #c{width:100px;height:100px;float:left}    #d{width:100px;height:200px;float:right;}    #e{width:200px;height:100px;float:left;}</style></head><body><div id="wrap"><div id="a">a</div><div id="b">b</div><div id="c">c</div><div id="d">d</div><div id="e">e</div></div></body></html>
时间: 2024-07-31 17:04:10

[转贴]一个有趣的布局的相关文章

win8系统电脑如何设置一个有趣的QQ标签

  win8系统电脑如何设置一个有趣的QQ标签          具体步骤: 1.打开QQ,点击自己的头像; 2.在QQ资料中点击"标签"选卡; 3.在下面输入想要设置的标签名点击"贴上"即可; 4.同时在标签选卡页中,我们把鼠标移动到不喜欢的标签上,点击"X"就可以删除了.

firebug的一个有趣现象介绍_javascript技巧

复制代码 代码如下: var obj = {length:0,splice:function(){}} console.log(obj) 猜猜上面会打印出啥? 没错,打印出来的看起来是一个空数组... 在FIREBUG里如果一个对象同时拥有length属性和splice方法,就会被firebug显示为数组的形式... 如果以前注意过的话就会发现JQUERY就是这么写的,通过选择器打印出来的看起来跟数组一样. 一直以来我都很好奇为毛返回的数组,但是却有数组根本没有的方法,也没有数组该有的方法,比如

求帮忙设计一个有趣的电路图

问题描述 求帮忙设计一个有趣的电路图 有7个人 每人被分到2个按钮 分别是yes和no 每个人同时 按下 0个 1个或者两个按钮 根据按下的情况 分别是 1 每个人的灯的情况完全相同的话 代表yes的灯和no的灯都不亮 2 yes no的个数正好相同 则yes的灯和no的灯都亮 3 yes被按下的次数比no多 只亮yes 反之亦然 注意 1的情况是 全yes 全no 全不按 全按

css-问大神一个CSS表格布局

问题描述 问大神一个CSS表格布局 如可让表格上面的图片居中.下面的文字保持不变 td width=""45%""img src=""images/ld.png"" width=""26"" height=""26"" class=""mr10""/<br/>带班领导/td 解决方案 在td里放两

ORACLE FLASHBACK TABLE 的一个有趣问题

大家都知道ORACLE 10G新增了FLASHBACK特性,其中FLASHBACK TABLE用来对误删的表进行修复.但是今天却发现了FLASHBACK TABLE的一个有趣问题,请看下面慢慢道来:下面我用一个例子来说明我的遇到的有趣的问题,欢迎大家探讨. SQL> CONNECT SYSDBA/***** AS SYSDBA 已连接. SQL> CREATE TABLE TEST (T VARCHAR2(10) ) ; 表已创建. SQL> DROP TABLE TEST; 表已删除.

一个有趣的排序题,类似acm

问题描述 一个有趣的排序题,类似acm 求大神解决!! 解决方案 排序就可以了http://zhidao.baidu.com/question/433177615.html?fr=iks&word=%C3%BF%B8%F6%D3%CE%CF%B7%D5%DF%B1%BB%B7%D6%C5%E4%B5%BD%D2%BB%D7%E9%B7%C7%B8%BA%D5%FB%CA%FD%2C%D3%CE%CF%B7%D5%DF%BF%C9%D2%D4%BD%AB%D5%E2%D0%A9%CA%FD%C5%

三大关系数据库字段值超长的一个有趣对比

三大关系数据库字段值超长的一个有趣对比   在开发中,我们可能会遇到插入字段值超长的情况,前阵子遇到这样一个案例,结果一对比后发现一个有趣的现象,如果插入字段值超长,ORACLE.SQL Server.MySQL它们会提示那个字段值超长吗?下面看看实验吧:   ORACLE数据库   SQL> create table test(id number(10), name varchar2(12));   Table created.   SQL> insert into test   2  se

Python内置函数Type()函数一个有趣的用法_python

今天在网上看到type的一段代码 ,然后查了一下文档,才知道type还有三个参数的用法. http://docs.python.org/2/library/functions.html 以前只是知道type可以检测对象类型.然后发现了一个有趣的用法. 复制代码 代码如下: def println(self): a = 1 + 1 print "%s,%s" % (self.aa, a) A = type('A',(),{'aa':'print a', 'println': printl

android程序我设置了一个横屏的布局,怎么才能让他在真实手机上横屏

问题描述 android程序我设置了一个横屏的布局,怎么才能让他在真实手机上横屏 横屏程序设置完了,不知道怎么在真实手机上横屏,求各位大神解惑 解决方案 在AndroidManifest 文件中申明 Activity时 android:name="activity" android:screenOrientation="landscape" /> 解决方案二: 有关android中横屏和竖屏的设置android 设置默认的横屏 解决方案三: 在xml和Acti