专栏首页前端说吧两列布局——但只用右浮动

两列布局——但只用右浮动

通过这个实验我明白了一个知识点,做左右结构的时候,不用把左边的写上左浮动,只需要把有浮动的块放到最前边,并设置有浮动,左边的放在有浮动的下边而且不用管,这样,父元素也不用清楚浮动,左边的元素也不用左浮动,一切就依旧会和自己做左右布局的老方法一样的效果。切记,结构上,把有浮动的元素放到前边,并设置右浮动。

为了试验不用清楚浮动,我把clearfix的相关代码注销了。

上代码:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7         /*.clearfix:after{
 8             clear: both;
 9             content: "";
10             display: block;
11         }
12         .clearfix{
13             *zoom: 1;
14         }*/
15             div{
16                 width: 300px;
17                 height: 400px;
18                 background: gainsboro;
19             }
20             div.right{
21                 float: right;
22                 width: 100px;
23                 background: red;
24             }
25             div.nofloat{
26                 background: greenyellow;
27             }
28             div.nofloat p{background: yellow;}
29             div.nofloat span{background: yellow;}
30         </style>
31     </head>
32     <body>
33         <div class="cont clearfix">
34             <div class="right">
35                 
36             </div>
37             <div class="nofloat">
38                 通过这个实验我明白了一个知识点,做左右结构的时候,不用把左边的写上左浮动,只需要把有浮动的块放到最前边,并设置有浮动,左边的放在有浮动的下边而且不用管,这样,父元素也不用清楚浮动,左边的元素也不用左浮动,一切就依旧会和自己做左右布局的老方法一样的效果。切记,结构上,把有浮动的元素放到前边,并设置右浮动。
39                 <p>坎坎坷坷扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</p>
40                 <span>非爱不可</span>
41             </div>
42         </div>
43     </body>
44 </html>

目前还没测试弊端,就看平时需要的布局效果都能实现,不浮动的左半块放块元素内联元素都可以了,以后发现问题再补充。

转载请注明:xing.org1^[http://www.cnblogs.com/padding1015/]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-缓冲运动:菜单栏型悬浮框

    xing.org1^
  • JS-缓冲运动-对联型悬浮框

    xing.org1^
  • css笔记 - 张鑫旭css课程笔记之 line-height 篇

    围绕文字看不见的盒子,其大小跟字体大小有关。范围大概就是选中单行文本后,你选中的区域了。

    xing.org1^
  • 了不起的 Webpack Scope Hoisting 学习指南

    Scope Hoisting 是 webpack3 的新功能,直译为 "作用域提升",它可以让 webpack 打包出来的代码文件更小,运行更快。

    pingan8787
  • 源码分析ElasticJob故障失效转移

    本节将探讨ElasticJob故障失效转移机制。我们知道ElasticJob是一款基于Qu-artz的分布式任务调度框架,主要是指数据的分布式。ElasticJ...

    丁威
  • CSS定位概述

    如果对一个元素进行相对定位,它将出现在它所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素“相对于”它原来的位置进行移动,这时元素依然占据原来的位置,但...

    菜的黑人牙膏
  • 【Webpack】654- 了不起的 Webpack Scope Hoisting 学习指南

    Scope Hoisting 是 webpack3 的新功能,直译为 "「作用域提升」",它可以让 webpack 打包出来的「代码文件更小」,「运行更快」。

    pingan8787
  • 干货 | Elasticsearch 6个不明显但很重要的注意事项

    Elasticsearch是被Netflix,微软,eBay,Facebook等Top N 顶级公司使用的搜索引擎。它很容易使用,但从长远来看相对难掌握。在本文...

    铭毅天下
  • 干货 | Elasticsearch 6个不明显但很重要的注意事项

    公众号里回复 Spring 可以查看系列 Spring & SpringBoot 文章!

    zhisheng
  • vue散碎知识点学习

    为了解决方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    老梁

扫码关注云+社区

领取腾讯云代金券