1

我正在使用以下 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 的宽度？

4

1 回答 1

2

我不确定您要达到什么目的，但我猜您正在尝试使所有内容对齐，无论屏幕大小如何。

您可以在“溢出隐藏” 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% 会做。请记住，图片上的流体宽度将根据屏幕分辨率放大或缩小图片。所以这不是一个完美的修复。

于 2011-09-03T14:53:53.757 回答