三个div向左浮动不在同一行,向右浮动在同一行的解决办法

  前几天在写代码的时候发现了一个问题,问题的大致描述如下:

  在一个大的div中,同一行有三个小的div,当三个小的div均向左浮动时,会出现换行问题,均向右浮动时却在同一行。

  解决这个问题的方法是在:在三个div的头和尾分别清除浮动。如    <div style="clear:both;"></div>

<div class="copyright">
        <div style="clear:both;"></div>      //清除浮动

        <div class="copyright_content_left">
            ...............
        </div><!--copyright_content_left结束-->
        <div class="copyright_content">
            ...............
        </div><!--copyright_content结束-->
        <div class="copyright_content_right">
            ...............
        </div><!--copyright_content_right结束-->
        <div style="clear:both;"></div>     //清除浮动
</div>            
时间: 2024-10-31 05:26:10

三个div向左浮动不在同一行,向右浮动在同一行的解决办法的相关文章

左两行右一行的布局(仅限三个div)

用三个div做一个类似下图的布局: <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>get objects by class</title> <style type="text/css"> div{ background:#ccc} .no1{margin-bottom: 10px;} .no1,.no2{

css关于控制div靠左或靠右的排版布局

关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).right(元素向右浮动) 2.position属性(position属性规定元素的定位类型) 值:absolute(生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left","right"属性进行规定.例:left:0,righ

三种Div高度自适应的方法

让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). 1.JS法 代码如下.原理:用JS判断左右DIV的高度,若不一致则设为一致.框架资源分享 Java代码   <div style="width:500px;background:#cccccc;height:0px;"> <div id="right" style

左浮动和右浮动

在div+css中浮动分为 左浮动,右浮动,清除浮动 ①    右浮动 所谓右浮动 ,指 一个块元素向右移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最右边的边框. ②    左浮动 所谓左浮动 ,指 一个块元素向左移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最左边的边框. 快速入门 : 理论完了以后直接开门见山来段代码: float.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN

xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft">左栏固定宽度为200px</div> 2 <div class="dyright">右栏固定宽度为200px</div> 3 <div class="dycenter">中间自适应宽度</div> 2.cs

div 居左靠左显示 CSS居左靠左

div 居左靠左显示 CSS居左靠左(体感音乐) DIV居左靠右显示篇 DIV靠右居左需要CSS样式单词为CSS浮动float,设置float:left即可实现DIV盒子居左显示. 小例:为了观察DIV是否靠左显示,我们设置其css宽度为300px;高度为120px:边框为1px黑色边框,DIV命名为“.div-left” 1.css代码: .div-left{width:300px;height:120px;border:1px solid #000;float:left}(体感音乐) 2.h

右浮动div换行现象的原因

右浮动div换行现象的原因:当然右浮动出现div换行的原因是多种多样的,下面就介绍一个初学者比较容易出现的一个错误.代码实例: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

用循环将三个DIV变成红色

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

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id