栅格+定位使图片高于文档流
用来展示图片不规则的定位,仅供参考!(row和col-4是参考bootstrap栅格系统做的)
html:
<div class="ui container">
<div class="row r1">
<div class="col-4 col-md-4 c1">
<div class="pt">
<img src="images/图层 2.png" alt="">
</div>
</div>
<div class="col-4 col-md-4 c2"></div>
</div>
<div class="row">
<div class="col-4 col-md-4 c2"></div>
<div class="col-4 col-md-4 c1">
<div class="pt">
<img src="images/图层 2.png" alt="">
</div>
</div>
</div>
</div>
css
body {
background-color: #e6e9eb;
}
.ui {
margin-top: 100px;
}
.row {
height: 400px;
margin-top: 1px;
margin-bottom: 140px;
background-color: #FFF;
}
.c1 {
position: relative;
height: 20vw;
}
.c2 {
height: 20vw;
background-color: blue;
}
.pt {
position: absolute;
left: 0;
bottom: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 100%;
width: 90%;
}
二:栅格布局,左侧图片,右侧li列表,鼠标悬停宽度增加,颜色改变,伸缩
html代码
<div class="row">
<div class="col-5">
<div class="ig">
<img src="images/图层 22.png" alt="">
</div>
</div>
<div class="col-3">
<ul>
<li>第一个实例</li>
<li><a href="">第二个实例</a></li>
<li>第三个实例</li>
</ul>
</div>
</div>
css代码
ul li {
float: right;
width: 35vw;
height: 10vw;
line-height: 10vw;
text-align: center;
border: 2px solid #000;
background-color: darkblue;
vertical-align: middle;
}
.ig {
text-align: right;
}
ul li a {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
}
ul li:hover {
width: 40vw;
background-color: #fff;
}
效果图:
栅格分两列,左列图片,右列文字描述