Question

我想在每个设备上创建一个看起来不错的列表。图像显示了我想要实现的目标。

我的第一个问题是描述在图像下面。第二个是图像不以移动设备为中心。

感谢您提前帮助我。

enter image description here

这是我的代码：

.title {
    margin: 0;
}

.tabpage-list {
    padding: 0;
    width: 100%;
}

    .tabpage-list {
        display: inline;
    }

.tabpage-list-item {
    margin-top: 1em;
    padding: 1em;
    background-color: #f5f5f5;
}

.tli-image-container {
    height: 100%;
    margin-right: 1%;
    float: left;
}

@media screen and (max-width : 480px) {
    .tli-image-container {
        float: none;
        text-align: center;
    }
}

和HTML

<div>
<ul class="tabpage-list">
    <li>
           <div class="tabpage-list-item">
                <div class="tli-image-container">
                    <img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
                </div>
                <div>
                    <p class="title">some title</p>
                    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
                </div>
            </div>
    </li>  
    <li>
           <div class="tabpage-list-item">
                <div class="tli-image-container">
                                        <img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
                </div>
                <div>
                    <p class="title">some title</p>
                    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
                </div>
            </div>
    <li>
</ul>
</div>

Answer 1

我认为您正在寻找：width:calc(100% - px);来保持图像的比例。此外，根据您的线框重写代码更快。 http://jsfiddle.net/NinoLopezWeb/twq87mj9/

列出响应式网页设计的项目位置

1 个答案: