Div对齐宽度对齐。相同的边距垂直

时间:2014-09-11 09:06:34

标签: html css

有没有办法让我可以垂直获得相同的空间,相同的空间我是水平的。

我在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%;
}

0 个答案:

没有答案