如何使文本不在图像周围流动，并使其在图像下响应

Question

我想让左边的图像浮动，右边的文字不会在它周围流动，当浏览器最小化时，它会落在它下面。像这样：

这是我目前获得的css：

.item-container{ margin: 0 20px 20px 25px;  }

.directory {display: inline; overflow: auto;}

.directory-image {float: left; margin-right: 17px;clear: left;}

Answer 1

你可以在.directory div中添加一个float：left，并给它一个特定值的宽度。

.directory { 
    float:left; 
    width:300px;
}

像这样：http://jsfiddle.net/aMA65/

您还可以为.directory和.directory-image添加百分比宽度，以使其更具响应性。 （不要忘记img {max-width：100％; height：auto;}）

Answer 2

这方面的诀窍是display: table;

<强> HTML

<div class="wrap">
 <img src="http://placekitten.com/150/150">
 <div class="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis ante id enim vestibulum viverra. Suspendisse malesuada justo et elit porttitor condimentum. Sed interdum mi dui, ut consequat risus laoreet quis. Sed quis elit nec arcu consectetur gravida vel eu lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non nisl vehicula, aliquet sem nec, rutrum libero. Maecenas in mi felis. Curabitur et semper justo. Sed vel faucibus massa. Maecenas semper elementum aliquet. Nam mattis elementum fringilla. Etiam suscipit mi ut mauris vehicula, id tempor libero molestie. Vestibulum molestie nulla non adipiscing pretium. Cras volutpat magna auctor, ornare massa at, consequat lectus. Sed ac pharetra metus. Praesent eleifend nisi vitae eros fermentum fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta vehicula augue nec elementum. Phasellus convallis lobortis dolor sed facilisis. Cras nisi elit, porta ac aliquet a, imperdiet eget turpis. Nullam euismod eros urna, in tincidunt enim feugiat id. Sed pharetra odio erat, et rhoncus massa sodales in. Nullam consectetur tortor sit amet ligula mollis, quis gravida eros pellentesque. Morbi eget laoreet mi, non euismod erat. Suspendisse elit est, dapibus a semper sed, molestie venenatis diam. Sed faucibus justo in ipsum molestie, et scelerisque ligula sodales. Vivamus sodales sodales arcu, ut bibendum diam consectetur sit amet. Donec id augue nibh. Nam vel mauris sem.
 </div>
</div>

<强> CSS：

.wrap { display: table; width: 100%; }
.wrap img { float: left; }
.wrap .content { display: table-cell; vertical-align: top; }

然后，在媒体查询中：

@media screen and (max-width:600px){
    .wrap { display: block; }
    .wrap img { float: none; display: block; margin: 0 auto; }
    .wrap .content { display: block; }
}

Answer 3

不需要表格或类似的无意义，只需要带有媒体查询的纯CSS

这是你如何做到这一点，btw重新调整浏览器的宽度400px以查看结果

您可以根据需要更改值，例如：

   @media only screen and (max-width: 960px) { }

在这种情况下，当浏览器窗口宽度小于960px时，将发生布局更改。

这是演示：

http://jsfiddle.net/darkosss/SE4p5/

如果您希望图像也具有响应性，请按照上述评论中的“img”标记说明进行操作。