以特殊样式用文字包裹图像

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; 
}

我想：

将图片放在左侧，将标题、文字放在右侧。 ==> 在第一个列表中
将图片放在中间并在中间的图片中显示标题和文本 ==> 在第二个列表中

BUT，这种风格需要遵循：

第一个列表中的图像宽度为 30%，第二个列表中的图像宽度为 50%。
ul, li 静态.
页面有响应。
这是我的代码示例，link：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>

以特殊样式用文字包裹图像

Wrap image with text in special style

html

css

responsive-design