5

私は夢中になろうとしています。私は検索とグーグルを使用しましたが、解決策を思いつくことができませんでした.それはうまくいきません:(

自動的に垂直方向のセンタリングと背景のために、他の div にネストされた div があります。本来は複数の画像を縦に並べて動的にサイズ変更します。写真の数 (幅、パディング) に応じていくつかの CSS スタイルを使用します。

しかし、このギャラリーでは写真が多すぎます。元のレイアウトはいくつかの行に分かれていますが、overflow-x: auto; を使用してネストされた "white-space:nowrap" が必要です。私のdivで。だから私はそれらをスクロールすることができますが、「空白：nowrap」はすべてのものを吹き飛ばし、すべてのdisplay：table属性を壊します。

私はこれが起こるべきだと思いますか？しかし、それから私は他の解決策または少なくとも親切なヒントが必要です.

また、単純化されたフィドルを作成しました: http://jsfiddle.net/x696B/9/ 表示テーブルの属性を削除すると、機能し、スクロールします。私のdivでそれが必要です。:D

これが私のnooby cssです（関連部分）

html
{
    height:100%;
}

body 
{
    height:98%;
    background-color: #FFF9E5;  
    padding: 0px;                               


  }    
.wrapper
{
        margin:auto;
        padding: 0px;
        z-index: 0;
        height:100%;
        width:100%;
        display:table;
    vertical-align:middle;
}

    .outer
    {
        z-index: 0;
        padding: 0px;
        display:table-cell;
        vertical-align:middle;
        background-color: #FFF9E5;
     }


div.container
{
        margin: 0           auto;
            display:table;
        z-index: 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width:60%;
        background-color: #867F27;
        padding-right:1%;
            padding-left:1%;
            white-space: nowrap;
            overflow: auto;
    } 

     .view
     {
        width:100%;
        white-space: nowrap;
        overflow-x: auto; 
        margin: 0 auto;
        text-align: left;
     }

display:table と display:table-cell をコメントとしてマークすると、ギャラリーは見栄えがよくスクロールしますが、中央に配置されません。（ロゴなどを含む他のdivを取得）

ここに私のhtmlがあります

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>my page</title>
        <style type="text/css">
        @import url("style.css");
    </style>
</head>
<body>

<div class="wrapper">
    <div class="outer">
        <div class = "logo"><img src="logo.png"/></img></div>
        <div class="container">
                <div class="view">
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
        </div>
    </div>
</div>


</body>
</html>

ああ、このばかげた質問を許してください。今までこのフォーラムは大きな助けになりましたが、今は負けました。

前もって感謝します。

4

3 に答える 3

2

私は解決策を手に入れました みんなありがとう、あなたは私の頭脳を働かせました:) そして、解決策を見るのを助けてくれました ビュークラスの幅を変更しました

 .view
 {
    /*width:100%;*/ /*this resizes but nested in divs */
                    /*with display:table; it breaks them*/

    width:800px;    /*with a fixed width it works very nice*/
    max-width: 75%; /*lets the gallery shrink on resize of the browser*/

    white-space: nowrap;
    overflow-x: auto; 
    margin: 0 auto;
    text-align: left;
 }

それで、他のページに保持してギャラリーに使用できる、垂直方向に中央揃えの構造を取得しました。ブラウザ ウィンドウのサイズを変更しても、見栄えがよく、サイズも（ある程度まで）変更されます。良い１日を ：）

于 2012-09-13T08:35:38.013 に答える
1

あなたのスタイルに追加line-height: 0;します。#viewこれにより、 内の の下にある余分な少しのスペースが削除さimgれます#view div。また、私が削除したもののうち、あなたが必要としないものもいくつかあり、あなたの を取り出しましたdisplay: table;。ほとんどの場合、その表示スタイルは使用しないでください。このフィドルを見て、これがうまくいくかどうか教えてください。

于 2012-09-12T16:26:13.360 に答える