0

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

  • 图片是谷歌图片搜索随机选择的，只是为了演示大小差异）

  • 更新到非常接近想要的结果，只需要使整个 ul 居中。

我正在寻找一个纯 CSS 解决方案，这意味着我可以保持 HTML 干净，而不是为了视觉效果将 div 嵌入另一个 div 中。

预期结果：

[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

这里有两个可能有用的东西的原型。

使用浮点数

试试下面的 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 回答