Skip to content

Instantly share code, notes, and snippets.

@YushengLi

YushengLi/wen.html

Created March 24, 2018 01:53
Show Gist options
  • Save YushengLi/65ffb961d5802b4d40e86d87d52108cf to your computer and use it in GitHub Desktop.
Save YushengLi/65ffb961d5802b4d40e86d87d52108cf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wen.html
<style>
.section {
width: 960px;
margin: auto;
border: 1px solid #888;
padding: 40px 0;
}
.clearfix {
clear: both;
}
.item-2 {
width: 460px;
height: 300px;
background: #ccc;
float: left;
margin: 0 10px;
}
< !-- h2,
p {
padding: 5px;
}
-->.item-3 {
width: 280px;
height: 300px;
background: #999;
float: left;
margin: 0 10px;
padding: 10px;
}
.item-3 img,
.item-3 h2,
.item-3 p {
padding: 5px 10px;
}
.item-3 img {
width: 260px;
}
</style>
<body>
<div class="section">
<div class="item-2">
<img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" width="460px" height="300px">
</div>
<div class="item-2">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At porro, tenetur, nesciunt autem voluptate consectetur inventore odit quibusdam qui, sint, consequatur ratione.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="section">
<div class="item-3">
<img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item-3">
<img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item-3">
<img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="clearfix"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment