0

固定幅の div 内に水平方向に多数の div (ボックス) を表示しようとしています。水平スクロール バーを使用して、親 div 内に収まらない div を表示したいと思います。

ただし、div は水平ではなく垂直に表示されます。それらを並べて表示するように強制する方法はありますか? また、水平スクロール バーを使用してそれらを表示します。以下のコーディングを投稿しました。

<html>
<head>
<title> Slide </title>
<style type="text/css">
.total
{
height:350px;
width:75%;
border:1px solid black;
margin-left:auto;
margin-right:auto;
margin-top:15%;
}
.slidepanel
{
border:1px solid purple;
width:100%;
height:100%;
overflow-x: scroll;
overflow-y: hidden;
}
.slideleft
{
border:1px solid green;
width:5%;
height:10%; 
margin-left:5%;
float:left;
text-align:center;
//padding-top:1%;
}
.slideright
{
//padding-top:1%;
border:1px solid green;
width:5%;
height:10%; 
margin-left:80%;
float:left;
text-align:center;
}
.box
{
border:1px solid red;
width:100%;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
}

</style>
</head>
<body>
<div class="total">
<div class="slidepanel">
<button class="slideleft">
 <<
</button>
<button class="slideright">
 >>
 </button>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>
4

4 に答える 4

1

はい、それらの周りにラッパーを置くことによって。このようにhttp://dabblet.com/gist/2787474

于 2012-05-25T11:21:11.720 に答える
1

幅 100% を指定.boxしたため、常にページ全体の幅が使用されるため、その横に他のボックスを配置するスペースが残っていません。幅を狭くするとうまくいきます。

http://jsfiddle.net/JDeaZ/

于 2012-05-25T11:23:04.853 に答える
0

いくつかのヒントとそれを行う簡単な方法をクールにします。可能な限り同じデータ値で作業します。% は IE で要素をスローすることがあります。px が適切で、さまざまな画面サイズで幅が 1200px が適切です。これが私がそれを行う方法です。

HTML

<div id="box_wrapper">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

CSS

#box_wrapper {
  height: 400px;
  width: 1200px;
  margin: /*top and bottom*/5px auto/*left and right*/; /*this will keep it centred*/
  overflow-x: scroll;
}
.box {
  float: left;
  width: 1200px;
  height: 398px;
}

特定の px を指定するのは良いことですが、ボーダー テクニックでは良い仕事です。これは、配置と必要な適切なサイズの取得に役立つため、幅を試してみてください。

何か凝ったことをして、overflow-x を非表示にしてから、

#box_wrapper:hover {
 overflow-x: scroll;
}

役立つことを願っています:D

于 2012-05-25T11:53:50.857 に答える
0

@RobinJが提案したように、ボックスに特定の幅を与えます。

また、margin: auto; も削除します。これにより、divが中央に配置されるためです。たとえば、margin-left: 10px; を使用できます。右マージン: 10px; div の左右に間隔を空けます。

これは私のコードがどのように見えるかです：

.box{
    border:1px solid red;
    width: 300px; /*fill in your desired width*/
    height: 300px; /*fill in your desired height*/
    float:left;
    margin-left: 10px;
    margin-right: 10px;
}

それが役立つことを願っています;）

于 2012-05-25T11:41:01.430 に答える