[英]HTML CSS DIV Panels
我想做這樣的事情:
到目前為止我所做的:
誰能告訴我我是如何做到這一點的...
謝謝! 提前...
代碼如下:
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;
}
參見: 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>
使右側的 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>
使用像https://simplegrid.io/這樣的網格,使用網格系統比花費一生擺弄 CSS 要好得多,尤其是考慮到你想出的任何代碼將來都可能會崩潰。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.