HTML CSS DIV 面板

Question

I want to make something like this:

What I do so far:

Can anyone tell me how I achieve this...

Thanks! In Advance...

See jsFiddle

---

Code Is As Follows:

HTML :

<div class="panel panel1">Panel 1x</div>
<div class="panel panel1">Panel 1x</div>
<br>
<div class="panel panel2">Panel 2x</div>

CSS :

body {
    background: #eeeeee;
}
.panel {
    display: inline-block;
    background: #ffffff;
    min-height: 100px;
    height: 100px;
    box-shadow:0px 0px 5px 5px #C9C9C9;
    -webkit-box-shadow:2px 2px 5px 5x #C9C9C9;
    -moz-box-shadow:2px 2px 5px 5px #C9C9C9;
    margin: 10px;
    padding: 10px;
}
.panel1 {
    min-width: 100px;
    width: 100px;
}
.panel2 {
    min-width: 245px;
    width: 245px;
}

Answer 1

See: jsFiddle

Hope you fix this problem:

 body { background: #eeeeee; } .panel { display: inline-block; background: #ffffff; min-height: 100px; height: 100px; margin: 10px; padding: 10px; } .panel1 { min-width: 100px; width: 100px; height: 120px; margin-bottom: 0; box-shadow: 0; } .panel2 { min-width: 100px; width: 100px; } .panel3 { min-width: 245px; width: 245px; margin-top: 0px; }

 <div class="panel panel1">Panel 1x</div> <div class="panel panel2">Panel 1x</div> <br> <div class="panel panel3">Panel 2x</div>

Answer 2

Make the height of the div to the right smaller than the left one, and have no margin on top/bottom. This would produce the result you are looking for

 body { background: #eeeeee; } .panel { display: inline-block; background: #ffffff; min-height: 100px; height: 100px; padding: 10px; } .panel1 { min-width: 100px; width: 100px; } .small { margin-left: 10px; width: 111px; height: 90px; min-height: 90px; } .panel2 { min-width: 245px; width: 245px; }

 <div class="panel panel1">Panel 1x</div> <div class="panel panel1 small">Panel 1x</div> <br> <div class="panel panel2">Panel 2x</div>

Answer 3

使用像https://simplegrid.io/这样的网格，使用网格系统比花费一生摆弄 CSS 要好得多，尤其是考虑到你想出的任何代码将来都可能会崩溃。