如何将这个空白空间用于图像(调整图像宽度)?
INSERT INTO mytable (col1, col2)
VALUES (c1a, c2a)
,(C1b, c2b)
,(C1c, c2c)
...
请检查此jsfiddle
答案 0 :(得分:0)
查看此DEMO
指定宽度以使用calc
li
属性
CSS:
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: inline-block;
width: calc(100% / 3 - 3px); /* Added this (Keep in mind I subtracted 3px since you have a margin-left of 3px) */
/* min-width taken out */
height: 174px;
box-shadow: none;
box-sizing: border-box;
background: none;
padding: 4px 0 0 4px;
margin: 0 0 0 3px;
padding: 0px;
float: left;
}
li div {
background-image:url(http://i.stack.imgur.com/WCveg.jpg);
float: left;
width: 100%;
height: 170px;
box-sizing: border-box;
margin: 0;
border-radius: 4px;
background-color: #105b63;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
HTML:
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>