html - 在 html 中固定一个 div 的宽度，另一个 div 的宽度应根据窗口大小动态减小

Question

<div>
 <div id="div1" class="myimg">
 </div>
 <div id="div2" class="detail">
 </div>
</div>

我的 html5 块如上。我正在使用媒体查询为 iphone、ipad、桌面设置样式。

我是响应式设计的新手。我想实现样式，以便 div1 的图像大小不会改变，并且 div2 的文本包含应该缩小，因为我减小了浏览器窗口的宽度。

即使我试图给 div2 %width 和 min-width 它正在关闭 div1。它不是呆在 div2 旁边。如果有人可以指导我如何写这个。这将是一个很大的帮助。

Answer 1

是的，这可以很容易地完成。这是JSFiddle 上的一个示例。

HTML

<div id="div1" class="myimg"></div> 
<div id="div2" class="detail"></div>

CSS

.detail {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed black
}

.myimg {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed red
}

这是你想要完成的吗？