1

これは、ul またはフローティング div を使用した 4 つの画像 (幅 = 160 ピクセル) の流動的なデザインです。ウィンドウのサイズを変更すると、すべてがうまくいきます。それは流動的です。

しかし、絶対位置に渡すと、最初は 160px が見つかりません。

ここで問題を見ることができますhttp://jsfiddle.net/zXDH9/

コード：

<html>
<head>
    <style>
        body { position:relative; }
        .container {
            /* remove comment to view problem */
            /*position:absolute; left:0; top:0;*/
            margin: 0;
            padding: 0;
            border: black 1px solid;
            max-width: 690px;
            overflow: hidden;
        }
        .galleryItem {
            float: left;
            width: 23%;
            margin: 0 1%;
            padding: 1% 0;
        }
        .galleryItem img { max-width: 100%; }
        ul { list-style: none; }
        ul.thumbs  {
            /* remove comment to view problem */
            /*position: absolute; left:0; top: 100px;*/
            display: block;
            margin: 0;
            padding: 0;
            border: black 1px solid;
            max-width:690px; overflow: hidden;
        }
        ul.thumbs>li {
            display: block;
            float: left;
            width: 23%;
            margin: 0 1%;
            padding: 1% 0;
        }
        ul.thumbs>li img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /></a></div>
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /></a></div>
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /></a></div>
    </div>
    <ul class="thumbs">
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /></a></li>
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /></a></li>
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /></a></li>
    </ul>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">/*jQuery 1.5.1 Supports IE9, but not 1.5.0*/</script>
    <script>
        $(function(){ // Document is ready
            /*alert($('ul.thumbs').outerWidth(true));*/
        });
    </script>   
</body>
</html>
4

2 に答える 2

1

デフォルトでは、div のような「ブロック」要素は、そのコンテナーと同じ幅になります。

要素の位置を Absolute に設定すると、要素をレイアウトのフローから外し、「コンテナと同じ幅」プロパティを削除します。コンテンツを含むように縮小されます。

画像はその中で最も幅が広く、フローティングされているため、最終的に垂直に積み重ねられ、結果の幅は 160px になります。

絶対的なポジショニングを使用して意図を詳しく説明していただけると、さらにお役に立てます。

于 2012-08-13T16:54:14.177 に答える
-1

神に感謝します。max-width: 690px を width: 690px, max-width: 100%; に変更する必要があります。デザインが正しくなります。

于 2012-08-14T15:40:19.510 に答える