Question

所以这是我的场景 - 我需要有两行三个div，但是所有六个方块都需要触摸而没有边框。当我调整窗口大小时，我需要6个方框按比例缩放窗口，而不会扭曲背景图像的宽高比。

因此，如果你缩放图像，我需要我的六个盒子按比例调整大小。截面的宽度为100％，盒子需要填充整个宽度。

有人可以为此推荐一种方法吗？这是我从页面的那一部分得到的HTML ...不太确定如何处理CSS：

<section class="cases">
    <div class="row-casebox">
        <div class="casebox">
        </div>
        <div class="casebox">
        </div>
        <div class="casebox">
        </div>
    </div>
    <div class="row-casebox">
        <div class="casebox">
        </div>
        <div class="casebox">
        </div>
        <div class="casebox">
        </div>
    </div>
</section>

谢谢！

Answer 1

使用inline-block获得当前加价的3x2网格：

.casebox {
    width: 33%;
    height: 50px;
    display: inline-block;
}

以下是其中的一个小提琴：http://jsfiddle.net/r8GpH/

或者，您可以使用float来实现类似的目标：

.casebox {
    width: 33%;
    height: 50px;
    display: block;
    float: left;
}

小提琴：http://jsfiddle.net/JQWpB/

修改

我只是重新阅读你的帖子，float方法可能最适合你，因为它消除了div之间的间距

编辑＃2

听起来你希望div在任何时候都是正方形，所以请使用vw单位：

.casebox { width: 30vw; height: 30vw; display: block; float: left; }

小提琴：http://jsfiddle.net/cSAwb/

Answer 2

您只需要将casebox属性设置为33％的宽度并向左浮动它们：

.casebox{
    float: left;
    width: 33%;
}

这里有一个例子jsfiddle

请注意，该示例包含一个边框，以便您可以看到正在发生的事情。只需删除边框即可实现您想要的效果（这将为您提供上面列出的代码）。

两排三盒，需要同等比例

2 个答案: