当其他元素向下堆叠时，使 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% 会做。请记住，图片上的流体宽度将根据屏幕分辨率放大或缩小图片。所以这不是一个完美的修复。