有没有办法让我可以垂直获得相同的空间,相同的空间我是水平的。
我在jsfiddle上设置了一些内容:demo
目标应该是我总是有相同的水平和垂直空间。
HTML:
<div class="page">
<div id="row-03">
<div class="content">
<div class="column-left">
<ul class="gutter">
<li>
<p><span class="darkblue">lorem</span> & ipsum</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li>
<li>
<p>2</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li>
<li>
<p>3</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li>
<li>
<p>4</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li>
<li>
<p>5</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li>
<li>
<p>6</p>
<img src="data:image/gif;base64,R0lGODlhpwCnAIAAAP///wAAACH5BAAAAAAALAAAAACnAKcAAALShI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+PloAADs=" />
</li> <span class="stretch"></span>
</ul>
</div>
<!-- -->
<div class="column-right"></div>
</div>
</div>
CSS:
.page {
width: 100%;
}
.stretch {
display: inline-block;
font-size: 0;
line-height: 0;
width: 100%;
}
#row-03 {
background-repeat: no-repeat;
background-size: cover;
}
.content {
background-color: pink;
margin: 0 auto;
max-width: 1200px;
min-width: 288px;
width: 100%;
}
.column-left {
background-color: gray;
display: inline-block;
vertical-align: top;
width: 50%;
}
.column-right {
background-color: blue;
display: inline-block;
float: right;
width: 50%;
}
#row-03 ul {
text-align: justify;
}
#row-03 ul li {
display: inline-block;
max-width: 167px;
position: relative;
width: 100%;
}
#row-03 ul li p {
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
position: absolute;
right: 0;
width: 80%;
}
#row-03 ul li img {
height: auto;
max-width: 167px;
width: 100%;
}