DIV设置浮动float以后下一个DIV要换行的方法
《div style=“float:left;”》 1111111 《/div》
《div style=“float:left;”》222222 《/div》
《div 》33333333《/div》
1111111 和222222 在同一行,接下来的33333333虽然没有float:left的属性,但是也会在同一行,
要想让33333333不在同一行怎么办呢,答案很简单就是加入clear:both;
《div style=“clear:both;”》33333333《/div》
这样就可以了解决div换行问题了。在div同一行设置之后进行换行。同样如果div之后是table的也可以。如下代码:
<div style="float:left;"> 1111111 </div>
<div style="float:left;">222222 </div>
<table style="clear:both">
<tr><td>tttttt</td></tr>
</table>
如果div后面是文本框或按钮之类的,
<div style="float:left;">页面内容</div><input type=text value=文本框 />
<div style="float:left;">页面内容</div><button>提交</button>
则无法在文本框或按钮上用style="clear:both",所以可以使用如下方法:
①在div后面是一<br />进行换行,如:<div style="float:left;">页面内容</div><br /><input type=text value=文本框 />
②在浮动的div后面增加一个空div并设置clear样式属性,如:<div style="float:left;">页面内容</div><div style="clear:both"></div><button>提交</button>
这样就可以解决浮动DIV换行的问题了。
参考出处:
http://blog.sina.com.cn/s/blog_6721f25c0101i1tk.html
http://www.jb51.net/css/221269.html
DIV设置浮动float以后下一个DIV要换行的方法的更多相关文章
- 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法
原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...
- 同级div设置display:inline-block,父级div强制不换行
同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...
- request设置属性 一般当做下一个页面的结果集
request设置属性 一般当做下一个页面的结果集
- JS window对象 返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL。
返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...
- 子div设置浮动无法把父div撑开。
<div class="mainBox"> <div class="leftBox"></div> <div clas ...
- div的浮动(float)
什么是浮动 浮动,故名思议,就是移动位置. 之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流. 例子 下面我们看例子 <html> <hea ...
- 解决div设置浮动,高度消失
给包围 浮动的层 加清除浮动样式,样式要兼容的用下面的代码.clearfix {*zoom:1; clear:both;}.clearfix:after{content:".";d ...
- html同行两个div浮动后下一个div怎么换行的问题
传送门:https://blog.csdn.net/asdfg6541/article/details/78514535
- ViewPage+frament不预载入下一个Frament数据解决的方法
在做一个ViewPage+Frament 滑动数效果,当滑动到每一页时载入哪一页的数据,可是ViewPage会预载入下一也数据.这个问题之前做项目是一直未解决,今天找到一个方法一下子就解决的这个问题, ...
随机推荐
- Java底层代码实现单文件读取和写入(解决中文乱码问题)
需求: 将"E:/data/车站一次/阿坝藏族羌族自治州.csv"文件中的内容读取,写入到"E:/data//车站一次.csv". 代码: public cla ...
- OpenGL学习进程(5)第三课:视口与裁剪区域
本节是OpenGL学习的第三个课时,下面介绍如何运用显示窗体的视口和裁剪区域: (1)知识点引入: 1)问题现象: 当在窗体中绘制图形后,拉伸窗体图形形状会发生变化: #include ...
- Linux Shell基础 Shell基本知识
概述 在 Linux 的脚本中,只要是基于 Bash语法写的Shell脚本第一行必须是"#!/bin/bash",用来声明此文件是一个脚本. 运行方式 Shell 脚本的运行主要有 ...
- @MarkFan 口语练习录音 20140423 [风雨哈佛路.Homeless To Harvard口语录音]
世界在转动,你只是一粒尘埃 没有你,世界照样在转 现实不会按照你的意识去改变的 一些人的需求 一些人的意志要比你更强 严酷的生活会让人不知所措 所以他们久久地困在挫败中 我们生气地抱怨,而对整体的形势 ...
- post请求和get请求content_type的种类
get请求的headers中没有content-type这个字段,post 的 content-type 有两种 : application/x-www-form-urlencoded 这种就是一般的 ...
- Java Map增删改查
示例代码: 学生类 package com.imooc.collection; import java.util.HashSet; import java.util.Set; /** * 学生类 * ...
- Eclipse开发快捷键精选
1.alt+?或alt+/:自动补全代码或者提示代码2.ctrl+o:快速outline视图3.ctrl+shift+r:打开资源列表4.ctrl+shift+f:格式化代码5.ctrl+e:快速转换 ...
- (转)OpenStack Kilo 版本中 Neutron 的新变化
OpenStack Kilo 版本,OpenStack 这个开源项目的第11个版本,已经于2015年4月正式发布了.现在是个合适的时间来看看这个版本中Neutron到底发生了哪些变化了,以及引入了哪些 ...
- Specify compute hosts with SSDs
scheduler_driver = nova.scheduler.filter_scheduler.FilterScheduler scheduler_available_filters = nov ...
- eclipse下进行c开发,使用zeromq
使用eclipse开发代码,一段zeromq的代码. #include <string.h> #include <stdio.h> #include <unistd.h& ...