div中让内容能不换行就尽量不换行.【纯原】
div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐.
<html>
<head>
<title>九歌·少司命</title>
<style type="text/css"> </style>
</head>
<body>
<hr/>
<div style="width:200px">
<span>秋兰兮麋芜,罗生兮堂下;</span>
<div style="float:right">
|=|
</div> </div> <div style="width:200px">
<span>绿叶兮素华,芳菲菲兮袭予;</span>
<div style="float:right">
|=|
</div> </div>
<hr/>
</body>
</html>
效果如下,怎么可以这样子|=|位置错乱了

解决方案一:清除浮动
上面引申出清除浮动问题, 因为有<div>加了float:right的原故,会影响后面<div>的展示效果.
所以我们需要清除浮动. 在<div style="float:right">后加个兄弟级别的<div style="clear:both"></div>
全代码如下(15,23行分别新增):
<html>
<head>
<title>九歌·少司命</title>
<style type="text/css"> </style>
</head>
<body>
<hr/>
<div style="width:200px">
<span>秋兰兮麋芜,罗生兮堂下;</span>
<div style="float:right">
|=|
</div>
<div style="clear:both"></div>
</div> <div style="width:200px">
<span>绿叶兮素华,芳菲菲兮袭予;</span>
<div style="float:right">
|=|
</div>
<div style="clear:both"></div>
</div>
<hr/>
</body>
</html>
解决方案二:溢出隐藏
在<div style="float:right">给父级别的<div>添加额外样式<div style="width:200px;overflow:hidden"></div>
(在10,18行分别添加了overflow:hidden)
<html>
<head>
<title>九歌·少司命</title>
<style type="text/css"> </style>
</head>
<body>
<hr/>
<div style="width:200px;overflow:hidden">
<span>秋兰兮麋芜,罗生兮堂下;</span>
<div style="float:right">
|=|
</div> </div> <div style="width:200px;overflow:hidden">
<span>绿叶兮素华,芳菲菲兮袭予;</span>
<div style="float:right">
|=|
</div> </div>
<hr/>
</body>
</html>
方案一,二 最终效果:

div中让内容能不换行就尽量不换行.【纯原】的更多相关文章
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- div中的内容居中
要使div中的内容居中显示,不仅div要设定“text-align:centr" ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.
- 怎样推断DIV中的内容为空
怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...
- div中的内容超过容器宽度的问题
问题描述: <div class="category"> <div class="column-a">排名</div> ...
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- 在指定的div中搜索内容,并滚动显示到当前搜索到的内容处
我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...
- div中的“内容”水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
随机推荐
- JSON数据格式解析
JSON数据的语法规则 1.数据以键值对的形式 2.数据由逗号分隔 3.花括号保存对象 4.方括号保存数组 以PHP的数组为例: <?php $arr = array( "aaaa&q ...
- Ubuntu设置静态IP的方法
通过修改配置文件/etc/network/interfaces,如果/etc/resolv.conf中提示nameserver会被resolvconf修改,是临时文件,那么dns server也可以在 ...
- [转帖]git命令参考手册
git init # 初始化本地git仓库(创建新仓库) git ...
- [书摘]HTTPS--From图解HTTP
1. HTTP存在的安全性风险: 1) 通信过程使用明文,容易被窃听 2) 不验证通信方的身份,可能遭遇伪装 3) 不验证通信数据包的完整性,可能遭遇篡改 2. HTTP+加密+认证+完整性保护=H ...
- 使用Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 默认配置就好 1.2 安装node.js 下载:http://nodejs.org/download/ 安装时直接保持默认配置即可. 2. 配置Github 1.1 ...
- tenda u1 usb wireless device install driver for kali linux kernal Debian 4.3.3-7kali2 (2016-01-27) x86_64 GNU/Linux
因为内核比较新的关系,tenda官方网站上面提供给u1无线网卡的驱动并不能正常编译使用,编译的时候报一个类似错误 /usr/src/linux-headers--kali1-common/Makefi ...
- jq 事件取消绑定与重新绑定
前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复, 对于这种需求, 我们会遇到两种情况, 一种是点击的按钮为fo ...
- mysql5.7 rpm安装教程
注意版本和此次更新时间 2017-12-03 版本:mysql-5.7.20-1.el6.x86_64 环境:linux6.x 官方下载地址: wget https://dev.mysql.co ...
- Leading and Trailing LightOJ - 1282 (取数的前三位和后三位)
题意: 求n的k次方的前三位 和 后三位 ...刚开始用 Java的大数写的...果然超时... 好吧 这题用快速幂取模求后三位 然后用一个技巧求前三位 ...orz... 任何一个数n均可以表示 ...
- bzoj 2120 数颜色 (带修莫队)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2120 题意:两种操作:Q 询问区间 l - r 内颜色的种类 ,R 单点修改 思路 ...