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中让内容能不换行就尽量不换行.【纯原】

解决方案一:清除浮动

上面引申出清除浮动问题, 因为有<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中让内容能不换行就尽量不换行.【纯原】

上一篇:pad 横屏 cell不正常显示


下一篇:postgresql----聚合函数