調整瀏覽器大小時，響應圖像的大小和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