HTML CSS DIV 面板答案

【问题标题】：HTML CSS DIV PanelsHTML CSS DIV 面板
【发布时间】：2014-08-13 10:00:00
【问题描述】：

我想做这样的事情：

到目前为止我做了什么：

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

谢谢！提前...

见jsFiddle

代码如下：

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

【问题讨论】：

Divs 不能这样环绕。您可以使 content 环绕浮动对象，但所有 HTML 元素都是矩形的（至少现在是这样）。
你能举个例子吗？？？
内容环绕浮动对象@Paulie_D
jsfiddle.net/4f8p5/2 或 jsfiddle.net/4f8p5/3
谢谢！引导面板可以做到吗？

标签： html css panel

【解决方案1】：

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

【讨论】：

【解决方案2】：

见：jsFiddle

希望你解决这个问题：

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>

【讨论】：

That's 看起来很漂亮。但现在问题是影子！！！ ???
是的，就是这么说的。问题是阴影将与后面的任何元素重叠。尝试将它们放在相同的 z-index 级别也不能解决问题，因为即使它们处于同一级别，浏览器也会简单地将最新的元素视为在顶部。您可以通过添加一个带有 :before 的白色矩形来解决这个问题。这是他的解决方案的更新。 jsfiddle.net/DAFW9/21
@Ege 的好回答
谢谢@Ege 在发表评论之前我没有看到你的评论
Sana 请点击此链接 jsfiddle.net/DAFW9/21

【解决方案3】：

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

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>

【讨论】：

抱歉，我听不懂。能举个例子吗？