Question

我有点坚持这个问题。

已经有效：

我的身体里面有一个大的div（也是主要的，只是出于css原因），它包含四列中的八个较小的div。我在我的div上使用float:left;，因此它们并排显示。我也可以通过display:inline-block;来做到这一点。大div有100％的宽度，较小的div应自动填充这100％。四列中的两列由一个带有height:100%;的div组成，两列带有两个div，一个位于另一个下方，每个div的高度为50％。

什么行不通：

我希望这些div总是并排，不管是哪种分辨率或设备导向都不应该有换行符。

所以请帮助我将这个大div横向（如果可能的话）垂直居中（我绝对不知道，为什么margin:0 auto;在这里不起作用）请告诉我，为什么要响应调整大小div（填充外部div的100％宽度，响应视口）不起作用或者我的失败。

编辑：内部div（内部图像）应仅按比例缩放，因此如果视口高度低于图像高度，则外部div应水平缩小。换句话说，无论分辨率/方向如何，我都想以正确的比例并排看待我所有的div。

PS：四列并不总是相同的宽度（并非所有列都具有外部div的25％）。

这是jsfiddle的链接：

http://jsfiddle.net/hLzoxmyb/1/

以下是HTML代码：

<body>
    <main>
        <div id="wrapper">
            <div id="one">
                <figure id="one">
                    <img src="01.png" alt="01">
                </figure>
            </div>
            <div id="two">
                <figure id="02">
                    <img src="02.png" alt="02">
                </figure>
                <figure id="03">
                    <a href="03.html"><img src="03.png" alt="03"></a>
                </figure>
            </div>
            <div id="three">
                <figure id="04">
                    <a href="04.html"><img src="04.png" alt="04"></a>
                </figure>
                <figure id="05">
                    <a href="05.html"><img src="05.png" alt="05"></a>
                </figure>
            </div>
            <div id="four">
                <figure id="06">
                    <a href="06.html"><img src="06.png" alt="06"></a>
                </figure>
            </div>
        </div>
    </main>
</body>

这是CSS代码：

body {
    background-color:#cccccc;
    font-family: monospace;
    font-size:120%;
    margin:0;
    padding:0;
    width:100%;
}

div#one figure, div#four figure {
    height:80%;
    height:80vh;
}

div#two figure, div#three figure {
    height:40%;
    height:40vh;
}

figure {
    margin:0;
    padding:0;
}

div#wrapper {
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
}

div#wrapper div {
    float:left;
}

div#wrapper div figure img, div#wrapper div figure a img {
    height:100%;
}

main {
    /*
    bottom:0;
    display:block;
    left:0;
    margin:auto;
    max-height:100%;
    max-height:100vh;
    max-width:100%;
    max-width:100vw;
    overflow:auto;
    position:fixed;
    right:0;
    top:0;
    */
    margin:0 auto;
    width:100%;
}

Answer 1

display: inline-block;和white-space: nowrap;并排放在一起，没有包装。

http://jsfiddle.net/hLzoxmyb/2/

我不明白你问题的第二部分。如果你澄清，我会更新我的答案。

编辑：添加几个％宽度规则可以通过缩小#wrapper的内容来消除滚动。

http://jsfiddle.net/hLzoxmyb/5/

修改：指定#wrapper的宽度，margin: 0 auto;居中。

http://jsfiddle.net/hLzoxmyb/6/

中心和缩放（响应！）div-wrapper里面有几个div

1 个答案: