2

我想显示这样的列表：

在此处输入图像描述

但是我的 CSS 知识不是很好，我遇到了一些问题，比如：

在此处输入图像描述

我认为它与浮动和类似的有关。尝试了几件事，但没有奏效。这是列表的 HTML：

<ul id="list">
    <li>
        <img class="itemImg" src="images/foo.jpg" width="230px" height="230px">
        <span class="title">Title title title title</span>
        <a class="rightImage" href="#">
            <img src="images/info_btn.png" width="120px" height="120px">
        </a>
        <span class="textBottom">textBottom textBottom textBottom textBottom </span>
    </li>

和CSS：

#list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 40px;
}

#list li {
    margin-bottom: 20px;
    padding: 10px;
    -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
}

.itemImg {
    -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
    margin-right: 10px;
}

.rightImage {
    float: right;
    margin-bottom: 20px;
    margin-top:20px;
}
/*  vertical-align: center; */

.title {
    vertical-align: top;
    font-size: 2em;
    font-weight: bold;
    background-color:#00ff00;
}

.textBottom {
    float: right;
    margin-top: 200px;
    background-color:#ff0000;
}

任何方向都非常感谢......谢谢。

编辑：我还希望“文本文本文本文本”行相对于父级的右下角对齐 - 而不是“Img2”。但我读过这种对齐方式在 CSS 中是不可能的。你怎么处理这个？

4

2 回答 2

1

你也需要那里的div，我会摆脱跨度。确保设置浮动和宽度。不要忘记清除你的花车。这是一个粗略的编辑，只是为了传达 div 和 float 的想法。

<li>
    <img class="itemImg" src="images/foo.jpg" width="230px" height="230px">
    <div class="leftcontainer"><div class="lefttop"><div class="title">Title title title title</div>
    <a class="rightImage" href="#">
        <img src="images/info_btn.png" width="120px" height="120px">
    </a></div>
    <div class="textBottom">textBottom textBottom textBottom textBottom </div></div>
</li>

然后添加css

    #list {
        list-style: none;
        margin: 0px;
        padding: 0px;
        font-size: 40px;
    }

    #list li {
        margin-bottom: 20px;
        padding: 10px;
        -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
    }
    #list li:after{clear:both}
    .itemImg {
        -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
        margin-right: 10px;
float:left;
width:50px;
    }

    .leftcontainer{float:right,width:200px}//some width

    .rightImage {
        float: right;
        margin-bottom: 20px;
        margin-top:20px;
width:50px;
    }
    /*  vertical-align: center; */

    .title {
        vertical-align: top;
        font-size: 2em;
        font-weight: bold;
        background-color:#00ff00;
float:left;
width:170px
    }

    .textBottom {
        float: right;
        margin-top: 200px;
        background-color:#ff0000;
width:160px;//some width
    }
于 2013-02-27T22:13:41.620 回答
0

我终于得到了非常接近我正在寻找的东西。有一些小问题，例如，底部文本仅在左图下方开始 - 不在同一行（即使它更短），也没有锚定在右下角。相反，它在正确的图像下方。但它看起来像我想要的。这是html：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <ul id="list">
        <li>
            <img class="itemImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Citrus_%C3%97_aurantium_-_fruits_cut.jpg/800px-Citrus_%C3%97_aurantium_-_fruits_cut.jpg" width="230px" height="230px">

            <span class="title">Title title title title title</span>


            <a class="rightImage" href="#">
                <img src="http://jungschirüti.ch/wordpress/wp-content/uploads/2011/02/info.png" width="120px" height="120px">
            </a>
            <div style="clear:both"></div>
            <span class="textBottom">Text Text Text Text Text </span>

            <div style="clear:both"></div>
        </li>

    </ul>
</body>
</html>

和CSS：

#list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 40px;
}

#list li {
    margin-bottom: 20px;
    padding: 10px;
    -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
  background-color: #aaaaff;
}

.itemImg {
    -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
    margin-right: 10px;
  float:left;
}


.rightImage {

  float: right;
    margin-bottom: 20px;
    margin-top:20px;
  display:block;

}
/*  vertical-align: center; */

.title {
    font-size: 2em;
    font-weight: bold;
    background-color:#00ff00;
    width:350px;
    display:block;
  float:left;
}

.textBottom {
    float: right;

    background-color:#ff0000;
  width:500px;
}
于 2013-03-01T20:47:00.510 回答