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

Question

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

我的html5 block 如上。我正在使用媒体查询为 iphone、ipad、台式机设置样式。

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

即使我尝试为 div2 提供 %width 和 min-width，它也会在 div1 中出现。它不在 div2 旁边。如果有人可以指导我如何写这个。这将是一个很大的帮助。

Answer 1

是的，这可以很容易地完成。这是一个 example on 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
}

这是你想要完成的吗？