0

工作示例和JS Fiddle

试图为此提出一个解决方案，该解决方案创建一个ul li列表，该列表显示等距的项目，但使用百分比。

该解决方案需要能够响应式地工作，即块（带有文本覆盖的图像）的大小将减小，它们之间的空间将缩小到 iPad 大小。在典型的手机分辨率下，它们会堆叠。

共有三个元素，但使用百分比的好处是可以添加一个额外的元素，而无需重做大量 CSS。希望块（在这种情况下为li项目）会相应地调整它们的大小和空间。

我尝试在这里玩一些等距的 CSS 技巧，但它们并不真正适合响应式。

我计划使用max-width:100%将图像调整为当前的最大宽度，li以便可以使用更大的图像而无需调整大小（在交换图像时节省时间，并且意味着可以在网站的其他地方使用相同的图像）

lilist 不需要使用，可以使用简单的divorspan结构。

有任何想法吗？

第一个问题：在我的JS Fiddle示例中，您可以看到图像根据窗口大小对齐和调整大小。然而，最右边的元素不与右边缘齐平（它们通常都是左对齐的）。虽然我已经添加了text-align:justify它似乎没有达到预期的效果

第二个问题：三个不可分是个问题。30% 不是真正的三分之一，而 33% 似乎将其排除在外。

第三个问题：空白。有没有办法阻止li放置在不同行的 's 之间的邪恶空白？我必须牺牲可读的 HTML 来摆脱空格吗？

HTML：

<div id="bottomWide">
    <ul>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    </ul>
</div>

CSS：

底宽{

width:85%;
margin:0 auto;
border:1px solid red;}

底宽 ul{

margin:0;
padding:0;

}

bottomWide li{

list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;

}

底宽img{

max-width:100%;

}

用于堆叠的媒体查询（效果很好）

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
    #bottomWide li{
    display:block;
    width:100%;
}
}
4

1 回答 1

4

这是一种方式：

http://jsfiddle.net/YT3KZ/3/

我将 li 更改为float:left;而不是display:inline-block;添加 amargin-left: 1%;并将宽度设为 32.333% 以补偿 1% 的边距并将其分布在 div 中。

这会将 li 定位在左侧 1% 的边距并在右侧切断 1%，因此您需要在 ul 上使用负边距来应对这种情况，或者您可以添加一个位置类来执行此操作。

margin-left:-1%;

另一种方法是使容器比您的页面宽度更宽，以便它们正确定位并使用负边距/填充来补偿将被切断的部分。

PS。只是注意到您不想要间隙..删除并将其1% margin更改li为33.333%

http://jsfiddle.net/YT3KZ/7/

注意：我没有删除不需要的 css。例如text-align:justify;，你可以清理它。

于 2013-04-12T12:34:39.937 回答