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 に答える