0

見出しがあり、その下に項目の選択を並べて表示します。アイテムの選択と同じ行に、1 枚の写真を表示します。

私が抱えている問題は、単一の画像 (X) を整列させて、その下部がアイテムの選択 (A、B、C) の下部と一致するようにすることです。例えば。

H1 Title             ----------
                     |        |
                     |        |
                     |    X   |
-----  -----  -----  |        |
| A |  | B |  | C |  |        |
-----  -----  -----  ----------

私が抱えている問題は、次のように表示されることです。

H1 Title

-----  -----  -----  ----------
| A |  | B |  | C |  |        |
-----  -----  -----  |        |
                     |    X   |
                     |        |
                     |        |
                     ----------

使用している HTML Im は次のとおりです。

<h1>H1 Title</h1>

<div id="items">
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</div>

<div id="single_image">
        <img src="myImage.png" />
</div>

私が使用しているCSSは次のとおりです。

#items { 
    float:left; 
}

#items ul { 
    list-style:none; margin:0; padding:0; 
}

#items ul li { 
    display:inline; float:left; 
    margin-bottom:20px; font-size:22px; 
}

#single_image { }

#single_image img { 
    float:right; height:130px; 
    width:inherit; margin-right:40px; 
}

誰か助けてくれませんか？問題を解決できません。CSS の img で vertical align 属性を使用してみましたが、違いはないようです。

4

2 に答える 2

1

画像が固定サイズの場合、この問題の簡単な解決策は、負の margin-top を使用することです。これにより、画像が上に独自の高さになります。つまり、実際には下が現在の上部になります。

たとえば、画像の高さが 130px の場合、次のようにします。

#single_image img { margin-top: -130px; }
于 2012-12-18T19:12:29.300 に答える
0

考えられる解決策の 1 つは、それらをコンテナーにラップし、#items をコンテナーの下部に絶対に配置することです。以下にサンプルを示します。

http://jsfiddle.net/5csWH/

<div class="container">
    <h1>H1 Title</h1>
    <div id="items">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
    <div id="single_image">
        <img src="myImage.png" />
    </div>
    <div class="clearfix"></div>
</div>

CSS:

#items          { float:left; }
#items ul       { list-style:none; margin:0; padding:0; position: absolute; bottom: 0; }
#items ul li    { float:left; margin-right:20px; font-size:22px; width: 50px; background: #DDD; }

#single_image       { }
#single_image img   { float:right; height:130px; width:inherit; background: #DDD; }

.container { width: 50%; margin: 0 auto; background: #EEE; position: relative; }
.clearfix { clear: both; }​
于 2012-12-18T19:10:59.190 に答える