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

最新推荐文章于 2020-10-28 16:57:02 发布

原创最新推荐文章于 2020-10-28 16:57:02 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

CSS笔记本专栏收录该内容

24 篇文章

订阅专栏

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

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;
}