Html 响应式Web设计的列表项位置

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

我的第一个问题是描述在图像下面。 第二个问题是图像没有集中在移动设备上

谢谢你提前帮助我

这是我的密码：

.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>

一些标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。Integer velit augue，内克维塔的porttitor，sodales commodo ligula。佩伦茨克的马萨·乌尔纳，射手座的乌拉姆·科珀·维塔，法雷特拉的精英。没有错误的元素，就没有正确的选择。普莱塞拉特万岁，奥古斯特万岁，厄洛斯·尼西·马蒂斯·阿库，我是狮子座的人。塞德·努拉·奎姆、莫利斯·韦利·艾利特·ac、各种妊娠猫。Donec elementum felis在lacus eleifend，一位placerat性爱拍卖商。在拉奥里特·奥纳雷·尼塞尔（laoreet ornare nisl）、布莱迪特·洛博蒂（blandit lobortis ipsum porttitor ac.Ut elit dolor）、埃吉斯塔·维塔斯（egestas vitae est nec）、特里斯蒂克·阿迪皮斯（tristique Adipis Lores Lobertis ac.Ut elit dolor）和其他人的。拉齐纳发酵液的分子量。在turpis的Volatip dui，vel sollicitudin。这是一个很好的选择。这是爱神的名言，也是我们的生命。这是一种生活方式，而不是一种生活方式。在前庭，坐着，坐着，坐着。


一些标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。Integer velit augue，内克维塔的porttitor，sodales commodo ligula。佩伦茨克的马萨·乌尔纳，射手座的乌拉姆·科珀·维塔，法雷特拉的精英。没有错误的元素，就没有正确的选择。普莱塞拉特万岁，奥古斯特万岁，厄洛斯·尼西·马蒂斯·阿库，我是狮子座的人。塞德·努拉·奎姆、莫利斯·韦利·艾利特·ac、各种妊娠猫。Donec elementum felis在lacus eleifend，一位placerat性爱拍卖商。在拉奥里特·奥纳雷·尼塞尔（laoreet ornare nisl）、布莱迪特·洛博蒂（blandit lobortis ipsum porttitor ac.Ut elit dolor）、埃吉斯塔·维塔斯（egestas vitae est nec）、特里斯蒂克·阿迪皮斯（tristique Adipis Lores Lobertis ac.Ut elit Do。拉齐纳发酵液的分子量。在turpis的Volatip dui，vel sollicitudin。这是一个很好的选择。这是爱神的名言，也是我们的生命。这是一种生活方式，而不是一种生活方式。在前庭，坐着，坐着，坐着。

我想你在找：

宽度：calc（100%-px）

以保持图像的比例。另外，基于线框重写代码更快

对我来说似乎很好。@TylerH它没有，因为描述（“Lorem ipsum..”）部分位于图像下方。您使用哪个浏览器？