Question

我有4个li's，div有背景图片（通过CSS）。我使用flexbox进行布局。我希望每列中包含3 li's的列。除了div包含图像之外，一切正常。 div的高度大于其父级。

奇怪的是，当我把它变成rows而不是columns时，它的高度正确。

（如果它显示正确的尺寸，请尝试使窗口宽度更宽。）

如何让div具有正确的尺寸？

JSFiddle

＆＃13;

$(document).ready(function () {
    "use strict";

    function resizeHeightLi() {
        $('li').css('height', 'calc(' + $('li').width() + 'px / 1.8)');
    }

    resizeHeightLi();

    $(window).resize(function () {
        resizeHeightLi();
    });

});

＆＃13;

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    flex-basis: 70%;
    height: 80%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    /*flex-direction: row; // When it's set to row, it works fine.*/
    flex-direction: column;
}
li {
    
    flex-basis: calc(100% / 3 - 2px); /* Subtract the border */
    color: firebrick;
    list-style-type: none;
    
    border: 1px solid firebrick;
}
.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li><div class="image"><span>1</span></li>
        <li><div class="image"><span>2</span></li>
        <li><div class="image"><span>3</span></li>
        <li><div class="image"><span>4</span></li>
    </ul>
</div>

＆＃13;

Answer 1

由于每个li的高度由CSS中的flex-basis规则处理，我认为无需再次使用JavaScript指定高度。相反，您可以在完成弹性计算后获得每个li的高度，并将其指定给图像div。这样，父元素和子元素的高度都相同。

function resizeHeightLi() {
    $('.image').css('height', $('li').height() + 'px');
}

编辑（仅限CSS）

要完全使用CSS完成同样的操作，您可以删除现有的所有JS并将以下内容添加到CSS中：

// In addition to what you already have in your li
li {
  // ...
  position: relative;
}

// Same here, in addition to what you have in .image
.image {
   // ...
   position: absolute;
   width: 100%;
   height: 100%;
}

使用（flexlayout）列时，div的大小不正确

JSFiddle

1 个答案: