2

我认为可以假设我对 CSS 的理解接近于 0。无论如何，我想创建这个小页面并在其上呈现一些类似 tile 的元素。问题是，它们由于某种原因没有被包裹起来……我的意思是，我想将它们一个一个地堆叠在另一个之下，如果 div 太小而无法容纳下一个 flex 项，则应该将其放置在另一列中。我怎么做？

<html><head>
<script src="./files/jquery-1.9.1.js"></script>
<script src="./files/jquery-ui-1.10.3.custom.js"></script>
<script src="./files/jQuery-slimScroll-1.1.0/slimScrollHorizontal.js"></script>
<script>
    $(function(){
         $('#scrollableArea').slimScrollHorizontal({
                  width:$(this).parent().width() + 'px',
                  height:$(this).parent().height() + 'px',
                  alwaysVisible: true,
                  start: 'left',
                  position: 'bottom',
                  railVisible: true,
                  wheelStep: 10,
                  size:'10px'
              }).css({  paddingBottom: '10px' });
    });
</script>
<link rel="stylesheet" href="./files/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="./files/default.css">
        <title>Matchmaker</title>
    </head>
    <body>
        <div role="main" style="height:92%">

            <div style=" height:500px" id="scrollableArea">
                <div class="slimScrollContent">
                    <div style="display:inline-block;">
                        <div class="flexContainer">
                            <div class="area ">
                                asdf
                            </div>
                            <div class="area ">
                                asdf
                            </div>
                            <div class="area">
                                asdf
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body></html>

以及我试图应用于这件事的 css：

.slimScrollDiv {white-space: nowrap; width:100%; height:100%; background:#DBDBDB;}

.slimScrollContent {margin:5px;}

.area {
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 0px 20px 1px #303030;
    margin:10px;
    padding: 10px;
    width:12em;
    min-height:12em;
    display:inline-block;
}

.main {
    width:50%;
    height:90%;
}

.flexContainer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    list-style: none;

    -webkit-flex-flow: column wrap;
    justify-content: space-around;
}
4

2 回答 2

0

只需在关闭头之前应用它...

<style>
.slimScrollDiv {white-space: nowrap; width:100%; height:100%; background:#DBDBDB;}

.slimScrollContent {margin:5px;}

.area {
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 0px 20px 1px #303030;
    margin:10px;
    padding: 10px;
    width:12em;
    min-height:12em;
    display:inline-block;
}

.main {
    width:50%;
    height:90%;
}

.flexContainer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    list-style: none;

    -webkit-flex-flow: column wrap;
    justify-content: space-around;
}
</style>
于 2013-07-18T18:32:58.437 回答
0

我做到了！我只是在我的 flexContainer 中添加了 height 属性：P

于 2013-07-18T19:16:02.100 回答