HTML CSS DIV面板

我想做这样的东西：

到目前为止我所做的：

谁能告诉我我是怎么做到的

谢谢！提前

看见

---

代码如下：

HTML：

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

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

---

使右侧div的高度小于左侧div的高度，并且在顶部/底部没有边距。这将产生您想要的结果

正文{
背景：#eeeeee；
}
.小组{
显示：内联块；
背景：#ffffff；
最小高度：100px；
高度：100px；
填充：10px；
}
.专题小组1{
最小宽度：100px；
宽度：100px；
}
.小{
左边距：10px；
宽度：111px；
高度：90px；
最小高度：90px；
}
.专题小组2{
最小宽度：245px；
宽度：245px；
}

面板1x
面板1x


面板2x参见：

希望您解决此问题：


正文{
背景：#eeeeee；
}
.小组{
显示：内联块；
背景：#ffffff；
最小高度：100px；
高度：100px；
利润率：10px；
填充：10px；
}
.专题小组1{
最小宽度：100px；
宽度：100px；
高度：120px；
页边距底部：0；
盒影：0；
}
.专题小组2{
最小宽度：100px；
宽度：100px；
}
.专题小组3{
最小宽度：245px；
宽度：245px；
边际上限：0px；
}
面板1x
面板1x


Panel 2x像使用网格一样使用网格系统比一辈子摆弄CSS要好得多，特别是考虑到你想出的任何代码将来都可能会崩溃。
div不能像这样缠绕。你可以让内容环绕一个浮动对象，但所有HTML元素都是矩形的（至少现在是这样）。你能给我举个例子吗？？？内容环绕一个浮动对象@Paulie_D或谢谢！使用引导面板可以吗？对不起，我不明白。你能举个例子吗？“让我们看起来漂亮一点。但现在的问题是阴影？？？是的，我就是来这么说的。问题是阴影将与后面的任何元素重叠。尝试将它们放在相同的z索引级别也无法解决问题，因为浏览器只会将最新元素视为处于顶部，即使它们位于同一级别。您可以通过添加一个带有：before的白色矩形来解决此问题。下面是他的解决方案的更新。@egethanced@Ege的回答很好。在发布评论之前，我没有看到你的评论。请点击这个链接jsfiddle.net/DAFW9/21