1

私は本当にこれで私の髪を引っ張っています。私はここに約5時間以上座って、それを理解しようとし、可能性を試行錯誤しました. 固定幅の中央に配置されたページがあり、水平方向にスクロールするギャラリー用に中央にスペースを設定したいと考えています。これは大きな問題です。

これは私のcssです：

#container {
 height: 800px;
 width: 950px;
 margin: auto;
 overflow: visible;
}
#header {
 background-image: url(images/header.gif);
 height: 155px;
 width: 950px;
}
#main {
 height: 417px;
 overflow-x: scroll;
 overflow-y: hidden;
 width: auto;
 background-color: #000;
 float: left;
 /* [disabled]white-space: nowrap; */
 /* [disabled]overflow: scroll; */
}
#footer {
 background-image: url(images/footer.gif);
 height: 128px;
 width: 950px;
 background-repeat: no-repeat;
 clear: both;
}
.text {
 font-family: "Arial Narrow", Futura-Book, sans-serif;
 font-size: 70%;
 width: 14px;
}
.pics {
 padding-left: 10px;
 float: left;
 padding-top: 10px;
 overflow-x: scroll;
 overflow-y: hidden;
}

私は初心者で、一生懸命に学ぼうとしていますが、これを理解することは本当にできません。テーブルはいらない。垂直にスクロールするボックスを作成できますが、それは私が望むものではありません。

よろしくお願いします。

ありがとう

4

2 に答える 2

0

これは古い質問であることは知っていますが、フロートがそのように機能するとは思わないと言いたいです。左または右のフロートを持つ要素は、設定をオーバーライドし、次の行にスペースを空けます。

これを修正するために、画像の float プロパティを削除し、コンテナにwhite-space:nowrap;を指定しました。

私がコードで何をしたかをここで実際に見ることができます。

これはCSSです：

#footer {
    white-space: nowrap;
    float:left;
    background-color:grey;
    max-height: 128px;
    width:950px;
    background-repeat: no-repeat;
    overflow: scroll;
    clear: both;
}
.pics {
    height:98px;
    padding-left:10px;
    padding-top:10px;
    float:;
    overflow-x:;
    overflow-y:;
}

オーバーフローの状況を強制するために使用した HTML は次のとおりです。

<p id="footer">

    <img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" />
    <img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" /><img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" />

</p>

フッターの段落は、特定の幅にすること、オーバーフローのためにスクロールバーを使用すること、および改行を許可しないように指示されます。そのため、次の行にドロップすることが許可されていないため、画像は浮かんでいるかのように動作するように強制されます。

これが誰かに役立つことを願っています。私はそれを使うつもりだと知っています。

于 2011-05-26T20:15:33.013 に答える
0

#main に「幅」を追加してみてください

#main {
 height: 417px;
 overflow-x: scroll;
 overflow-y: hidden;
 width: auto;
 background-color: #000;
 float: left;
 width:950px;

}
于 2011-05-26T20:23:06.003 に答える