带有响应式图像的 2 列 CSS 响应式布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21270767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
2-column CSS responsive layout with a responsive image
提问by Charles
I've looked through as many posts on this subject that I can find, but none of them solve this puzzle. Is it possible to have a left column with text and a right column with an image that will flow into a single column when resized, with the an auto resizing image?
我已经浏览了我能找到的关于这个主题的尽可能多的帖子，但没有一个能解决这个难题。是否可以有一个带有文本的左列和一个带有图像的右列，该图像在调整大小时会流入单列，并带有自动调整大小的图像？
Using a max-width of 100% on img will make the image responsive and auto-resize. However, the auto-resize doesn't work in a table or with a percentage or a float applied to the div around it. So any CSS 2 column layout that contains either a float, or a percentage to the image will defeat the image resizing.
在 img 上使用 100% 的最大宽度将使图像具有响应性和自动调整大小。但是，自动调整大小在表格中不起作用，或者在其周围的 div 上应用了百分比或浮点数。因此，任何包含浮点数或图像百分比的 CSS 2 列布局都会使图像大小调整失效。
Other than using a grid, does anyone have a solution for this?
除了使用网格之外，有没有人对此有解决方案？
回答by 3dgoo
If you float the parent div of the image it shouldn't effect the responsive width of the image.
如果您浮动图像的父 div，它不应影响图像的响应宽度。
HTML
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
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;
}
}
