2列CSS响应布局与响应图像 [英] 2-column CSS responsive layout with a responsive image

问题描述

我已经浏览了很多关于这个问题的文章，我可以找到，但没有一个解决这个谜题。是否可以使用带有文本的左列和带有图像的右列，当调整大小时，将使用自动调整大小的图像，流入单个列？

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

除了使用网格，任何人都有解决方案

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

/ p>

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 doionm fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusecati cum labosiosam magni recusandae earum unde fuga deserunt laudantium sorreundre dreimus reair tempora pariatur consi tutur iste nulla a aut ea sit nam autem doloremque iusto实验。 Mollitia sequi assumends corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam。 Voluptatibus dolores natus sint enim fugiat。 Sapiente破坏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

< pre class =lang-css prettyprint-override> .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和（max-width：480px）{
.left，
.right {
float：none;
width：auto;
}
}


隐藏

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.

Other than using a grid, does anyone have a solution for this?

解决方案

If you float the parent div of the image it shouldn't effect the responsive width of the image.

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响应布局与响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！