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

时间:2015-04-22 12:37:42

标签: html css responsive-design

我想制作两个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>

2 个答案:

答案 0 :(得分:0)

我认为你需要这个: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>

答案 1 :(得分:0)

如果可用,您可以使用CSS3功能calc()。 在图片上设置min-width 100%,并使用右侧div的200px缩小它。

喜欢这样

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

另外,我在带边框的元素上设置了border-box,所以它都适合。请记住,现在向这些元素添加填充时,元素的大小不会增加。

<强> Fiddle