HTML CSS DIV面板 [英] HTML CSS DIV Panels

问题描述

我想这样做：

I want to make something like this:

到目前为止我做了什么：

What I do so far:

任何人都可以告诉我如何实现这个...

Can anyone tell me how I achieve this...

谢谢！ In Advance ...

Thanks! In Advance...

代码如下：

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

推荐答案

到右边比左边小，并且在顶部/底部没有边距。这将产生您要查找的结果。

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>

这篇关于HTML CSS DIV面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！