1. ホーム
  2. html

[解決済み] 画像とテキストを並べて表示させる方法

2022-03-04 18:54:34

質問

写真のような]、facebookのアイコンとテキストを並べたいのですが、どうすればいいですか?うまく表示できません。

私が試したコード

CSS

 .iconDetails {
 margin-left:2%;
float:left; 
height:40px;
width:40px; 
} 

.container2 {
    width:100%;
    height:auto;
    padding:1%;
}

HTML

<div class='container2'>
        <div>
            <img src='http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png' class='iconDetails'>
        </div>  
    <div style='margin-left:60px;'>
    <h4>Facebook</h4>
    <div style="font-size:.6em">fine location, GPS, coarse location</div>
    <div style="float:right;font-size:.6em">0 mins ago</div>
    </div>
</div>

私の JSFiddle

解決方法は?

h4にはおかしなマージンがかかっているので、削除してください。

h4 {
    margin:0px;
}

http://jsfiddle.net/qMdfC/2/

を編集します。

http://jsfiddle.net/qMdfC/6/

0 分のテキストは、最初の div に float left を追加しています。