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

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

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

为了试验不用清楚浮动,我把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/]

目录
相关文章
|
SQL 存储 分布式计算
大数据计算系统 Blink 在端侧的应用实践
本文主要介绍了端侧通过Blink任务对埋点数据进行实时聚合和清洗,解决端侧日志时效性问题,并基于实时日志搭建线上监控运维体系,从而提升端侧整体的稳定性。
532 0
大数据计算系统 Blink 在端侧的应用实践
|
运维 Kubernetes Cloud Native
云原生时代下,如何高效构建与部署微服务
【9月更文挑战第8天】随着云计算技术的飞速发展,云原生已成为现代软件架构的重要趋势。本文将深入浅出地介绍云原生概念、微服务架构的优势以及如何在云平台上高效构建和部署微服务。我们将通过实际的代码示例,展示在Kubernetes集群上部署一个简单的微服务应用的过程,帮助读者理解云原生环境下的微服务开发和运维实践。
|
10月前
|
算法 Linux 调度
深入理解Linux操作系统的进程管理
本文旨在探讨Linux操作系统中的进程管理机制,包括进程的创建、执行、调度和终止等环节。通过对Linux内核中相关模块的分析,揭示其高效的进程管理策略,为开发者提供优化程序性能和资源利用率的参考。
318 32
英伟达玩转剪枝、蒸馏:把Llama 3.1 8B参数减半,性能同尺寸更强
【9月更文挑战第10天】《通过剪枝和知识蒸馏实现紧凑型语言模型》由英伟达研究人员撰写,介绍了一种创新方法,通过剪枝和知识蒸馏技术将大型语言模型参数数量减半,同时保持甚至提升性能。该方法首先利用剪枝技术去除冗余参数,再通过知识蒸馏从更大模型转移知识以优化性能。实验结果显示,该方法能显著减少模型参数并提升性能,但可能需大量计算资源且效果因模型和任务而异。
253 8
|
9月前
|
存储 安全 数据安全/隐私保护
阿里云服务器五代、六代、七代、八代实例简介及性能提升介绍
随着技术的不断进步,到2025年,阿里云服务器实例也经历了多代升级,从五代实例到最新的八代实例,每一代都在性能、稳定性、能效比等方面取得了显著提升。有的用户由于是初次接触阿里云服务器,所以不是很清楚阿里云服务器五代、六代、七代、八代实例有哪些,它们各自在云服务器性能上有哪些提升。本文将详细介绍阿里云服务器五代、六代、七代、八代实例的特点及性能提升,帮助用户更好地了解并选择适合自己的云服务器实例。
396 29
|
算法 Python
7-17|Python求三个数最大值
7-17|Python求三个数最大值
|
9月前
|
弹性计算 运维 网络安全
评测报告:阿里云操作系统智能助手OS Copilot体验
评测报告:阿里云操作系统智能助手OS Copilot体验
131 3
|
11月前
|
搜索推荐 算法 C语言
【排序算法】八大排序(上)(c语言实现)(附源码)
本文介绍了四种常见的排序算法:冒泡排序、选择排序、插入排序和希尔排序。通过具体的代码实现和测试数据,详细解释了每种算法的工作原理和性能特点。冒泡排序通过不断交换相邻元素来排序,选择排序通过选择最小元素进行交换,插入排序通过逐步插入元素到已排序部分,而希尔排序则是插入排序的改进版,通过预排序使数据更接近有序,从而提高效率。文章最后总结了这四种算法的空间和时间复杂度,以及它们的稳定性。
452 8
|
人工智能 资源调度 机器人
揭秘重磅嘉宾!2024云栖大会看什么
2024云栖大会来了! 将于9月19日至9月21日 在杭州云栖小镇召开 汇集全球最新云计算、AI硬科技
498 8
揭秘重磅嘉宾!2024云栖大会看什么
|
人工智能 数据处理
AI识别检验报告 -PaddleNLP UIE-X 在医疗领域的实战
AI识别检验报告 -PaddleNLP UIE-X 在医疗领域的实战
557 0