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中让内容能不换行就尽量不换行.【纯原】的更多相关文章

  1. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  2. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  3. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  4. 怎样推断DIV中的内容为空

    怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...

  5. div中的内容超过容器宽度的问题

    问题描述: <div class="category">    <div class="column-a">排名</div> ...

  6. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  7. 在指定的div中搜索内容，并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

  8. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  9. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

随机推荐

  1. PHP加密与编码技术

    md5加密: string  md5( string $str [,bool $raw output=false]) md5加密方法用的挺多,有两个参数,第一个参数是要加密的字符串,第二个参数默认为f ...

  2. RedHat 5.6 问题简记

    1.XDMCP协议 使用XDMCP协议,需要配置“远程屏幕”(禁用+简介模式+与本地模式相同),注意不是"远程桌面"(这就是VNCServer). XDMCP协议与VNC协议的本质 ...

  3. nodefs模块的使用demo

    为什么要使用递归?因为stat本身就是一个异步的函数所有存在异步问题不能够进行循环遍历. 在使用该种方法时候需要注意的一点是必须要在箭头标记处进行数据数组的存取.否则会由于异步问题导致输出空或者其他问 ...

  4. git 查看远程分支最后一次提交时间

    背景 因为工程创建时间很长了,项目又特别多,导致代码库中远程分支有100多.想要清理一下远程分支,但又不能盲目的删除,需要一定的参考信息. 可以通过代码最后提交时间来进行判断,但是100多个分支,一个 ...

  5. php开发APP接口（总结一）

    一.什么是app接口:服务端与客户端的数据交互. 大部分APP接口是通过http协议通信的. http通信的三要素: URL:   通信的地址 Method:通信的方式(get | post | pu ...

  6. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  7. Axure8.0从入门到精通

    1. 新建工程 菜单->File->New 2. 添加组件并编辑组件 选中左侧Libary可选择Default/Flow/Icons,找到相应的组件并移动到工作区:并在右侧选中相应的组件属 ...

  8. Ubuntu 16.04安装Eclipse

    此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK和Tomcat. 下载: https://www.eclipse. ...

  9. BZOJ1115[POI2009]石子游戏——阶梯Nim游戏

    题目描述 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必 ...

  10. BZOJ1433[ZJOI2009]假期的宿舍——二分图最大匹配

    题目描述 学校放假了······有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如A 和B都是学校的学生,A要回家,而C来看B,C与A不认识.我们假设每个人只能睡和自己直接认 ...