调整浏览器大小时，响应图像的大小和div消失
[英]Responsive images size and div disappearing when browser is resized
问题描述
I want make two div s: image and description for image . 
我想要两个div ： image和image的 描述 。 If there is not enough space for 100% image size, this image must be smaller. 如果没有足够的空间容纳100％的图像尺寸，则此图像必须较小。 Description div should have a fixed size on the right of the image. 说明div在图片的右侧应具有固定的大小。
In my code, if I reduce browser width the div with the image description moves under the image instead of staying to the right. 在我的代码中，如果我减小浏览器宽度，则带有图像描述的div将移动到图像下方，而不是向右移动。
How I can fix this? 我该如何解决？
.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 个解决方案
解决方案1
0 2015-04-22 12:49:59
I think you need this : demo 我认为您需要这个： 演示
CSS: CSS：
.parentdiv {
width:100%;
float:left;
}
.imgdiv {
margin-right:210px;
}
.imgdiv img {
width:100%;
}
.textdiv {
width:200px;
float:right;
}
HTML: 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>
解决方案2
0 2015-04-22 12:54:44
If available you can use the CSS3 functionality calc() . 如果可用，则可以使用CSS3功能calc() 。 Set a min-width of 100% on the image, and reduce it with the 200px of the right div. 将图像的min-width设置为100% ，然后将其缩小为右div的200px 。
Like so 像这样
max-width: calc(100% - 200px);
Also, I set a border-box on the elements with a border so it all fits. 另外，我在带有border-box的元素上设置了一个边框，这样就很合适了。 Keep in mind that when you add padding to these elements now, the element does not increase in size. 请记住，当您现在向这些元素添加填充时，该元素的大小不会增加。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.