0

すべての正方形が右に移動するように、div の下部 (x 軸) にスクロールを強制的に追加するにはどうすればよいですか?

CSS:

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
}

#videowall-grid .videowall-row{
    border: 1px solid red;
    overflow-y: auto;
    width: 700px;
    height: 120px;
}

#videowall-grid .videowall-square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align:top;
}​

HTML:

<div id="videowall-grid" style="display: block;">
    <div class="videowall-row">
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_2">sadfasfasdafsdasdfsafsadfsafsfadfasdfasfasdfasf</div>
        <div class="videowall-square" id="1_3">adfasfdasdf channel 1 camera with a very very very</div>
        <div class="videowall-square" id="1_4">asdfadsffasdsf</div>
    </div>
    <div class="videowall-row">
        <div id="2_1" class="videowall-square">asdfasd cam1</div>
        <div id="2_2" class="videowall-square">asdfasd cam2</div>
        <div id="2_3" class="videowall-square">asdfasd cam4</div>
        <div id="2_4" class="videowall-square">button</div>
    </div>
    <div class="videowall-row">
        <div id="3_1" class="videowall-square"></div>
        <div id="3_2" class="videowall-square">button</div>
        <div id="3_3" class="videowall-square">button</div>
        <div id="3_4" class="videowall-square">button</div>
    </div>
</div>​
4

2 に答える 2

0
  • 四角に追加overflow: auto;して、あふれているテキストが中に留まるようにします。
  • 行を追加white-space: nowrap;して、正方形を強制的に同じ行に配置します。
  • 行の高さを正方形の高さに設定するline-height: 100px; か、パディングを高さ（100/2 = 50）に設定padding: 50px 0;して、テキストを垂直方向の中央に配置することができます（コメント後に編集）

線の高さのある垂直方向の中心。
パディング付きの垂直中央。

例| コード

CSS

#videowall-grid{
    width:700px;
    border:1px dotted #dddddd;
    display: none;
    margin: 5px auto;
    padding: 5px;
    text-align:center;
}

#videowall-grid .videowall-row{
    border: 1px solid red;
    overflow-y: auto;
    width: 700px;
    height: 120px;
    white-space: nowrap;
}

#videowall-grid .videowall-square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align:top;
    overflow: auto;
}

HTML

<div id="videowall-grid" style="display: block;">
    <div class="videowall-row">
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_1">afasfasdfas</div>
        <div class="videowall-square" id="1_2">sadfasfasdafsdasdfsafsadfsafsfadfasdfasfasdfasf</div>
        <div class="videowall-square" id="1_3">adfasfdasdf channel 1 camera with a very very very</div>
        <div class="videowall-square" id="1_4">asdfadsffasdsf</div>
    </div>
    <div class="videowall-row">
        <div id="2_1" class="videowall-square">asdfasd cam1</div>
        <div id="2_2" class="videowall-square">asdfasd cam2</div>
        <div id="2_3" class="videowall-square">asdfasd cam4</div>
        <div id="2_4" class="videowall-square">button</div>
    </div>
    <div class="videowall-row">
        <div id="3_1" class="videowall-square"></div>
        <div id="3_2" class="videowall-square">button</div>
        <div id="3_3" class="videowall-square">button</div>
        <div id="3_4" class="videowall-square">button</div>
    </div>
</div>
于 2012-12-13T12:56:11.143 に答える
0

誰が JS ソリューションを望んでいるように見えます。しかし、http://flesler.blogspot.com/2007/10/jqueryscrollto.html の使用を検討しましたか?

物事がずっと簡単になります。

于 2012-12-13T12:52:38.843 に答える