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. 『编程题全队』Beta 阶段冲刺博客五

    1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.为新建提醒框添加了正则匹配限制 2.添加了新建Reminder的功能 3.初 ...

  2. 使用TensorFlow实现分类

    这一节使用TF搭建一个简单的神经网络用于分类任务,首先把需要的包引入,另外为了防止在多次运行中一些图中的tensor在内存中影响实验,采取重置操作: import tensorflow as tf i ...

  3. 分布式 NewSQL 对比

    1.TiDB: 说明: PingCAP 公司基于 Google Spanner / F1 论文实现的开源分布式 NewSQL 数据库. 开源分布式 NewSQL 关系型数据库 TiDB 是新一代开源分 ...

  4. POJ1942-Paths On a Grid-组合数学

    从n+m步中挑选min(n,m)步向上走,剩下的就是向下走. 求解n+mCmin(n,m)时,要一边计算一边约分. #include <cstdio> #include <algor ...

  5. Codeforces976D Degree Set 【构造】

    题目大意:构造一个点数为dn+1的无向图,无向图中点的度数的集合等于给出的集合d. 题目分析: 当n=0的时候,一个点即可. 当n=1的时候,答案是一个包含d1+1个点的完全图. 否则将d2~dn-1 ...

  6. poj2965 【枚举】

    The game “The Pilots Brothers: following the stripy elephant” has a quest where a player needs to op ...

  7. Web.config中设置启用webservice远程调试访问 参数看不到

    <system.web><compilation debug="true" /> <!--begin启用webservice远程访问--> &l ...

  8. 自学Aruba5.3.3-Aruba安全认证-有PEFNG 许可证环境的认证配置Captive-Portal

    点击返回:自学Aruba之路 自学Aruba5.3.3-Aruba安全认证-有PEFNG 许可证环境的认证配置Captive-Portal 1. Captive-Portal认证配置前言 1.1 新建 ...

  9. 洛谷 P2467 地精部落 解题报告

    P2467 [SDOI2010]地精部落 题目描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为\(N\)的山脉\(H\)可分为从左到右的\(N ...

  10. cf860E Arkady and A Nobody-men (树剖)

    容易得出,如果我们按照深度一层一层地做,做完一层后,这层某个点的答案就是它的祖先们的子树大小(统计大小时不包括树根) 由于我太菜了不会别的方法,虽然N是5e5的,还是只好用一个树剖(树状数组降常数)水 ...