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