display:table-cell实现左侧浮动右侧自适应+等高布局

最新推荐文章于 2024-07-26 20:51:40 发布

小章鱼哥

最新推荐文章于 2024-07-26 20:51:40 发布

阅读量7k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u014787301/article/details/52025300

版权

本文介绍了如何利用CSS的`display:table-cell`属性来实现左侧浮动元素和右侧自适应布局，以及创建等高布局的效果。通过设置元素的浮动和将内部元素设为表格单元格样式，可以达成所需的设计目标。需要注意的是，使用`table-cell`后，某些样式如margin可能不再生效。

摘要由CSDN通过智能技术生成

1.display:table-cell实现左侧浮动右侧自适应

实现效果：
这里写图片描述
实现代码：

    <!--使用table-ceil实现左侧浮动右侧自适应-->
    <div class="container">
        <a class="fl"><img  width="150px" height="200px" src="http://img4.duitang.com/uploads/item/201210/05/20121005140836_s5AWw.png"></a>
        <div class="right">
            <p><a href="#">章鱼小娃你</a> 来自北京</p>
            <p

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小章鱼哥

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
display:table-cell实现左侧浮动右侧自适应+等高布局

1.display:table-cell实现左侧浮动右侧自适应实现效果：实现代码：  <div class="container"> <a class="fl"><img width="150px" height="200px" src="http://img4.duitang.com/uploads
复制链接

扫一扫