Question

我已经查看了我能找到的关于这个主题的很多帖子，但没有一个能解决这个难题。是否可以使用带有文本的左列和带有图像的右列，该图像在调整大小时会流入单个列，并带有自动调整大小的图像？

在img上使用100％的最大宽度将使图像响应并自动调整大小。但是，自动调整大小不能在表中使用，或者使用百分比或浮点数应用于它周围的div。因此，任何包含浮动或图像百分比的CSS 2列布局都会使图像大小调整失败。

除了使用网格之外，还有人有解决方案吗？

Answer 1

如果浮动图像的父div，则不应影响图像的响应宽度。

<强> HTML

<div class="group">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusamus cum laboriosam magni recusandae earum unde fuga deserunt laudantium facere ducimus rerum tempora pariatur consectetur iste nulla a aut ea sit nam autem doloremque iusto exercitationem voluptatem facilis eos quasi. Mollitia sequi assumenda corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
    </div>
    <div class="right">
        <img src="http://lorempixel.com/640/480/" alt="" />
    </div>
</div>

<强> CSS

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

<强> Demo

具有响应式图像的2列CSS响应式布局

1 个答案: