Question

我想制作两个div s：图像和图像描述。如果没有足够的空间容纳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

我认为你需要这个：demo

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，所以它都适合。请记住，现在向这些元素添加填充时，元素的大小不会增加。

<强> Fiddle

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

2 个答案: