Question

有没有办法可以实现这种响应式布局。我已经从许多不同的角度接近它，使用砌体，包装和使用CSS。

到目前为止，我还没有能够使网格像素完美，一些指导将非常感激。

这是我正在尝试的最新标记，我不打算添加额外的块，我只需要找到一种方法来使这些像素完美。

<style type="text/css">

.container {
    width: 100%;
}

.block {
    display: inline-block;  
    text-align: center;
    margin-right: 20px;
}
.A {
    width: calc(66% - 20px);
    background-color: red;
    min-height: 400px;
}

.B {
    width: calc(33% - 20px);
    background-color: orange;
    min-height: 400px;
}

.C {    
    width: calc(33% - 20px);
    min-height: 200px;
    background-color: yellow;
}

.last { margin: right 0;}
.third {width: 33%;}
.two-thirds {width: 66%;}
.row {margin-bottom:20px;}

<div class="container">
<div class="row">
    <div class="block A">A</div>
    <div class="block B last"> last">B</div>
</div>

<div class="row">
    <div class="block B">B</div>
    <div class="block A last">A</div>
</div>

<div class="row">
    <div class="two-thirds">
        <div class="block C">C</div>
        <div class="block C">C</div>
        <div class="block A last">A</div>
    </div>

    <div class="third">
        <div class="block B">B</div>
        <div class="block C">C</div>
    </div>
</div>

响应css砌体样式布局

0 个答案: