Question

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

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

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

即使我试图给出div2％宽度和最小宽度，它也会降低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
}

这是你想要完成的吗？

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

1 个答案: