两栏自适应-加overflow:hidden方式

四月四日梦

于 2018-10-14 22:47:15 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS笔记本

本文链接：https://blog.youkuaiyun.com/MagicWing_zs/article/details/83052073

CSS笔记本专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS进行网页布局的方法，包括响应式设计的实现，通过不同类别的组合，如.product-box, .rightPrroductBox 和 .leftrroductBox，创建美观且功能性的网页结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<div class="col-xs-12 col-sm-6 col-md-4">
    <a href="#" class="product-box activeP">
        <div class="rightPrroductBox">

        </div>
        <div class="leftrroductBox">

        </div>
    </a>
</div>

CSS

.product-box {
    display: block;
    width: 100%;
    height: 150px;
    margin-top: 30px;
}
.product-box.activeP {
    background-color: #e92322;
}
.product-box .rightPrroductBox {
    float: right;
    width: 80px;
    height: 150px;
}
.product-box .leftrroductBox {
    overflow: hidden;
}
.rightPrroductBox,.leftrroductBox {
    background-color: white;
}