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. [2017BUAA软件工程]第0次博客作业

    [2017BUAA软件工程]第0次博客作业 结缘计算机 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 计算机是你喜欢的领域吗?是你擅长的领域吗? 我当时报考高考志愿的时候就已经是想好报 ...

  2. PAT 1083 是否存在相等的差

    https://pintia.cn/problem-sets/994805260223102976/problems/994805260780945408 给定 N 张卡片,正面分别写上 1.2.…… ...

  3. Jenkins 登录提示 登录无效 的解决办法

    学习自:https://www.cnblogs.com/amberly/p/6288773.html 1. jenkins服务器重启之后, 再次登录提示登录无效. 重启多次也无法解决. 2. 根据文档 ...

  4. MES架构

    FlexWeaver作为速威公司全新一代MES的技术平台,提供MES所需的全系列平台服务,针对工业大数据提供分布式计算环境.统一数据库引擎.大数据及云计算支撑等等. ● 同时适应企业内网服务器及云部署 ...

  5. Pandas三个数据结构

    系列(Series) 数据帧(DataFrame) 面板(Panel) 这些数据结构构建在Numpy数组之上,这意味着它们很快. 考虑这些数据结构的最好方法是,较高维数据结构是其较低维数据结构的容器. ...

  6. 01 基于umi搭建React快速开发框架

    介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...

  7. multi_index_container 多索引容器

    multi_index_container是c++ boost库中的一个多索引的容器.因工作中用到了,特来测试试用. #include "stdafx.h" #include &q ...

  8. BZOJ4699 树上的最短路（最短路径+dfs序+线段树+堆+并查集）

    首先一般化的将下水道和塌陷看成一个东西.注意到在从源点出发的所有需要使用某条下水道的最短路径中,该下水道只会被使用一次,该下水道第一个被访问的点相同,且只会在第一个访问的点使用该下水道.这个第一个访问 ...

  9. c# 对象存cookie

    下载并引用Newtonsoft.Json.dll 对象转json,然后存cookies string xxx= Newtonsoft.Json.JsonConvert.SerializeObject( ...

  10. NOIp2017D2T2(luogu3959) 宝藏 (状压dp)

    时隔多年终于把这道题锅过了 数据范围显然用搜索剪枝状压dp. 可以记还有哪些点没到(或者已到了哪些点).我们最深已到的是哪些点.这些点的深度是多少,然后一层一层地往下推. 但其实是没必要记最深的那一层 ...