在其他元素堆叠时，使div宽度（百分比）填充其容器div？

Question

我正在使用以下CSS声明：

.hentry,
.no-results {
    float: left;
    margin: 0 0 1.625em;
    position: relative;
    width: 32%;
    max-width: 260px;
    min-width: 130px;
}

归档此：

基本上，流体布局除了中间的缩略图（它们只是部分流动）。我意识到使元素堆叠的唯一方法是定义它们的宽度（在本例中为min-width）。

现在，当浏览器的窗口达到这个大小时：

右边还有空间。

我想知道是否可以让图像填满右侧的空间？

编辑：我应该根据屏幕分辨率的趋势（例如ipad，android，iphone）定义div的宽度吗？

Answer 1

我不确定你想要实现什么，但我猜你无论屏幕的大小如何都试图让一切都对齐。

您可以在“溢出隐藏”div中使用带有负边距的填充： 例如：

/* wrapper around the text divs */ 
 ParentDIV {
width:100% ;
overflow:hidden ;
float:left
}

/* child divs for text */ 
Child1, Child2 , Child3 {
width:33% ; 
padding-bottom : 600px ;
margin-bottom  : -600px ; 
float:left
}

/* image div for images */ 
Imagewrap {
width:100% ; 
float:left
clear: both ; 
}

html看起来像：

<div class="ParentDIV">
    <div class="Child1">
       <div class="Imagewrap"><img1></div>
       <p>text</p>
    </div>
    <div class="Child2">
       <div class="Imagewrap"><img2></div>
       <p>text</p>
    </div>
    <div class="Child3">
       <div class="Imagewrap"><img3></div>
       <p>text</p>
    </div>
</div>

此设置将使所有内容保持一致。至于图片给它一个流畅的宽度我认为在你的情况下100％会做。请记住，图片上的流畅宽度会根据屏幕分辨率向上或向下缩放图片。所以这不是一个完美的解决方案。