江苏龙网

  1. 主页 > 生活百科 > >

CSS 浮动布局实例( 二 )

css

注意 ， 这里位于右侧的按钮在 HTML 结构中仍然是在文本的前方 ， 只需要设置右浮动就行了
.head{float: left;}.info{overflow: hidden;}.right{float: right;margin-left: 8px;/*其他样式*/}完整代码可访问 float-3-cols (codepen.io)[6]
四、文本省略跟随布局还有一类比较常见但是有些棘手的布局 ， 是这样的
1.当文本比较多时 ， 超出隐藏 ， 标签文本在最右边2.当文本比较少时 ， 标签文本跟随文本
示意如下
CSS 浮动布局实例

文章插图
 
这里如何使用浮动实现呢？仔细观察 ， 其实就是一个两栏布局
<div class="card"><div class="right">编辑</div><p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。一直平移直到碰到了所处的容器的边框 ， 或者碰到另外一个浮动的元素 。</p></div>.info{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
CSS 浮动布局实例

文章插图
 
很明显现在标签文本一直位于右边 ， 那如何实现标签文本跟随的效果呢？其实可以嵌套一个最大宽度为 100% 的容器
CSS 浮动布局实例

文章插图
 
<div class="card"><div class="wrap"> <!--添加一个最大宽度为100%的容器--><div class="right">标签</div><p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。一直平移直到碰到了所处的容器的边框 ， 或者碰到另外一个浮动的元素 。</p></div></div>.wrap{display: inline-block;max-width: 100%;}
CSS 浮动布局实例

文章插图
 
完整代码可访问 float-auto-text (codepen.io)[7]
如果不考虑兼容的话 ， width: fit-content 会是更好的选择 ， 可以使容器保持 block 的特性 ， 并且宽度由文本内容决定 ， 详细可以参考这篇文章： 理解CSS3 max/min-content及fit-content等width值 [8]
.wrap{/*display: inline-block;*/max-width: 100%;width: fit-content;}另外 ， 如果多行文本就不适用了 ， 可以用另一种方式实现 ， 详细原理可以查看这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)[9]
CSS 浮动布局实例

文章插图
 
完整代码可访问float-mul-tags (codepen.io)[10]
五、其他扩展布局这一部分相当于以上的扩展了 ， 下面来看一个案例 。
有时候标签的后面会有日期 ， 会一直位于最右边 ， 效果如下
CSS 浮动布局实例

文章插图
 
有人可能会想到绝对定位 ， 但是这里的日期可能不是固定的 ， 需要自适应宽度 ， 那如何实现呢？其实就是就是两种布局的结合
CSS 浮动布局实例

文章插图
 
因此需要再添加一层容器 ， 实现如下
<div class="card"><span class="date">6-14</span><div class="outer-wrap"> <!--新加一层容器--><div class="wrap"><div class="right"><button class="btn">标签</button></div><p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。一直平移直到碰到了所处的容器的边框 ， 或者碰到另外一个浮动的元素 。</p></div></div></div>下面就是两栏布局的写法
.date{float: right;}.outer-wrap{overflow: hidden;}
提示：如果采用 fit-content 方式 ， 可以省去 .outer-wrap 这一层容器


推荐阅读


上一篇：白色千日红,千日红价格多少钱斤千日红的价格行情动态走势

下一篇：红叶烟茶王,红叶石楠开花怎么办