调整浏览器大小时，响应图像的大小和div消失

Question

我想要两个div ： image和image的 描述。 如果没有足够的空间容纳100％的图像尺寸，则此图像必须较小。 说明div在图片的右侧应具有固定的大小。

在我的代码中，如果我减小浏览器宽度，则带有图像描述的div将移动到图像下方，而不是向右移动。

我该如何解决？

 .parentdiv { width:100%; height: auto; border: 1px solid black; } .imgdiv { width:auto; border: 1px solid green; float: left } .textdiv { width: 200px; height: 400px; border: 1px solid red; float: left } .imgdiv img { max-width:100%; max-height:100%; }

 <html> <body> <div class="parentdiv"> <div class="imgdiv"> <img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png"> </div> <div class="textdiv"> Description </div> </div> </body> </html>

Answer 1

我认为您需要这个：演示

CSS：

.parentdiv {
    width:100%;
    float:left;
}
.imgdiv {
    margin-right:210px;
}
.imgdiv img {
    width:100%;
}
.textdiv {
    width:200px;
    float:right;
}

HTML：

<div class="parentdiv">
    <div class="textdiv">Description</div>
    <div class="imgdiv">
        <img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
    </div>
</div>

Answer 2

如果可用，则可以使用CSS3功能calc() 。 将图像的min-width设置为100% ，然后将其缩小为右div的200px 。

像这样

max-width: calc(100% - 200px);

另外，我在带有border-box的元素上设置了一个边框，这样就很合适了。 请记住，当您现在向这些元素添加填充时，该元素的大小不会增加。

小提琴

调整浏览器大小时，响应图像的大小和div消失

问题描述

2 个解决方案

解决方案1
0 2015-04-22 12:49:59

解决方案2
0 2015-04-22 12:54:44

调整浏览器大小时，响应图像的大小和div消失

问题描述

2 个解决方案

解决方案1 0 2015-04-22 12:49:59

解决方案2 0 2015-04-22 12:54:44

解决方案1
0 2015-04-22 12:49:59

解决方案2
0 2015-04-22 12:54:44