0

jsfiddle : http://jsfiddle.net/MhcTz/

  • 写真はGoogle画像検索でランダムに選択されたもので、デモ用にサイズの違いがあります)

  • 必要な結果に非常に近いように更新されました。ul全体を中央に配置するだけです。

純粋な CSS ソリューションを探しています。つまり、視覚効果のためだけに div を別の div に埋め込むのではなく、HTML をきれいに保つことができます。

予想される結果:

[img1]       [img2]      [img3]
--------------------------------
            [notes1]    [notes2]

私が得た現在：

--------------------------------
[img1]       [img2]      [img3]
            [notes1]    [notes2]

HTML:

<ul class="subject-contents">
   <li> <img src="images/img1.png"> </li>
   <li>
        <img src="images/img2.png">
        <p>notes...</p>
   </li>
   <li>
        <img src="images/img3.png">
        <p>notes...</p>
   </li>
</ul>

CSS:

ul.subject-contents {
    /* it is horizontal but valign top */
    list-style-type: none;
    width:75%;
    overflow:auto;
    margin:0 auto;
    padding-bottom: 64pt;
    background: url(../images/bottom_boarder.png) center bottom no-repeat;
    text-align:center;
}

ul.subject-contents li {
    float:left;
}

ul.subject-contents li img+p{
   /* ?? */
}

ul.subject-contents li:last-child(){
   float:clear;
}
4

1 に答える 1

0

動作する可能性のあるものの 2 つのプロトタイプを次に示します。

フロートの使用

次の CSS を試してください。

ul.subject-contents {
    /* it is horizontal but valign top */
    list-style-type: none;
    width:75%;
    overflow:auto;
    margin:0 auto;
    padding-bottom: 64pt;
    XXXX background: url(../images/bottom_boarder.png) center bottom no-repeat;
    XXXX text-align:center;
    border: 1px solid blue;
    margin: 0;
    padding:0;
    position: relative;
    height: 120px;
}
ul.subject-contents:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2px dotted gray;
    width: 100%;
}
ul.subject-contents li {
    float:left;
    border: 1px dotted blue;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 60px;
    position: relative;
}
ul.subject-contents li img {
    position: absolute;
    bottom: 0;
}
ul.subject-contents li p {
    margin: 0;
    position: absolute;
    top: 70px;
    width: inherit; /* you may need to set this */
    background-color: beige;
}
ul.subject-contents li:last-child(){
   float:clear;
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/2uc2h/

フロートに依存している場合は、必要な効果を得るためにいくつかの高さと幅を設定する必要があります。

テーブルセルの使用

より簡単な方法は、次のように使用することdisplay: table-cellsです。

<div class="subject-contents">
    <div class="row-wrap r1">
        <p><img src="http://placehold.it/100x30"></p>
        <p><img src="http://placehold.it/100x50"></p>
        <p><img src="http://placehold.it/100x30"></p>
    </div>
    <div class="row-wrap r2">
        <p>notes...</p>
        <p>notes...</p>
        <p>notes that can wrap...</p>
    </div>
</div>

div.subject-contents {
    display: table;
    border: 1px solid blue;
}
div.row-wrap {
    display: table-row;
}
div.row-wrap p {
    display: table-cell;
    border: 1px dotted gray;
}
div.row-wrap img {
    vertical-align: bottom;
}

http://jsfiddle.net/audetwebdesign/VtVuY/で他のデモを参照してください。

于 2013-09-12T11:43:12.470 に答える