Question

我有以下代码创建一个包含图像的列表。

HTML：

<ul>
    <li class="list">
      <div class="list_div">
        <img class="list_image" align="top" src=""/>
        <h3><a>Headline 1</a></h3>
        <p>text,text,text,text,text,text</p>
      </div>
    </li>
    <li>
      <div class="list_div">
        <img class="list_image" align="top" src=""/>
        <h3><a>Headline 2</a></h3> 
        <p>text,text,text,text,text,text.</p>
      </div>
    </li>
</ul>

CSS：

li {
    padding: 2px;
    color: #000000;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
    border-bottom: 1px solid #AFAFAF;
    background-color: #CCD5DF;
}

.list_div {
    width: 100%; 
    display: block; 
}

.list_image { 
    float: left;
    width: 30%;
    height: auto;
    border: 2px solid #000; 
    left: 0; 
    top: 0; 
}

我想：

将图像放在左侧和标题中，将文本放在右侧。 ==＆GT;在第一个列表
将图片放在中心并显示标题，图片中的文字在中心==＆gt;在第二个清单

但是，这种风格需要遵循：

第一个列表中的图像宽度为30％，第二个列表中为50％。
ul，li处于静态位置。
页面是响应式的。
这是我的代码示例，链接：http://jsfiddle.net/2ycggga9/

Answer 1

这就是你想做的事情

http://jsfiddle.net/2ycggga9/5/

.list2 > h3,.list2>p{
  position:relative;
  left:-23%;
}
<li class="list2">
   <img class="list_image" src="http://thekitemap.com/images/feedback-img.jpg"/>
   <h3><a>Headline 2</a></h3> 
   <p>text,text,text,text,text,text.</p>
</li>

用特殊风格的文字换行图像

1 个答案: