0

次のことを実装する必要があります。

何

画像とテキストは下に固定する必要があります。また、それらは 1 行に収める必要がありますが、テキストは画像に対して 10 ピクセル上にする必要があります。それはすべて問題ありません (imgタグにはdisplay: inlineプロパティがあるため) が、このテキストを処理することはできません。

で div にテキストを配置するとposition: absolute; bottom: 0、画像に重なってしまいます。にするとposition: relative; float: left;、ブロックの一番下に固定されなくなります。またposition: absolute、leftプロパティを画像の幅に設定して作成することはできません。これは、幅が異なる可能性があるためです。

必要なものを見つけるための正しい検索要求を行うことさえできません。そこで何ができるでしょうか？

4

3 に答える 3

1 
    body, p, div{
    margin:0px;
    padding:0px;
    }
    div{
        position:relative;
        background:blue;
    }
    img{
        background:red;
        display:inline;
        width:200px;
        height:200px;
        margin-right:20px;

    }
    p{
        display:inline;
        position:absolute;
        bottom:10px;
    } 



    <body>
      <div id='x'>
        <img src='image'/>
        <p> Text </p>
      </div>
    </body>
于 2013-10-03T20:00:04.847 に答える
0

絶対配置を使用せず、以下の css をテキストに追加してみてください

vertical-align: top;

JSFiddleとJSFiddle2の違いを見つける

于 2013-10-03T16:42:14.333 に答える