2

私の CSS の理解は 0 に近いと仮定しても問題ないと思います。とにかく、この小さなページを作成して、タイルのような要素を表示したいと思います。なんらかの理由でそれらがラップされないということです...つまり、それらを下に積み重ねたいのですが、divが小さすぎて次のフレックスアイテムが収まらない場合は、別の列に配置する必要があります。それ、どうやったら出来るの？

<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

やった！高さプロパティをflexContainerに追加しただけです:P

于 2013-07-18T19:16:02.100 に答える
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 に答える