0
私はstackoverflowで質問を探していますが、私が試したものはありません。それらのほとんどは私が実際に達成したいものを歪めます。私はどこに間違っているのか、私が欠けているのかを知りたい。コンテナのサイズに対してテキストのインデントを維持しながら、テキストとイメージを同じ行に整列させる
私が試したいくつかのリンクは以下のとおりです。 CSS align images and text on same line、Image and text on same line?など
私が試したし、それらを削除しました。私は自分自身で達成したことを示しています。
達成したいことはありますか？
1）コンテナのサイズが変更されても自動的にテキストのサイズを変更します。
2）テキストがサイズ変更されると、インデントが維持されます。
例：
| img | - |テキスト行1 |
|テキストライン2 |
注：私はイメージとしてフォントのすばらしいアイコンセットを使用しています。
更新： Paulie_Dの回答は機能しますが、反応しません。 .groupコンテナにいくつかのパディングの内側に.icon divの絶対http://design.google.com/resizer/#device=handset&url=http%3A%2F%2Fhungry.pe.hu%2Fhelp&width=720
#org_info_container {
background-color:#FFFFFF;
border: 1px #CCCCCC solid;
-moz-box-shadow: 0px 0px 2px #C0C0C0;
-webkit-box-shadow: 0px 0px 2px #C0C0C0;
box-shadow: 0px 0px 2px #C0C0C0;
margin-right: 5%;
margin-top:20px;
width:28%;
float:right;
}
#org_info_details {
padding-left: 10px;
padding-right: 10px;
font-family: 'Montserrat';
font-size: 14px;
}
.group {
margin-bottom: 20px;
}
.icon {
color: #ED734F;
margin: 3%;
display: inline;
}
.text {
display: inline;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="org_info_container">
<div id="org_info_details">
<div class="group">
<div class="icon"><i class="fa fa-envelope-o fa-lg fa-fw"> </i>
</div>
<div class="text"><a href="mailto:[email protected]" class="help">[email protected]</a> | Email us</div>
</div>
<div class="group">
<div class="icon"><i class="fa fa-phone fa-lg fa-fw"> </i>
</div>
<div class="text"><a href="tel:9836345939" class="help">XXXXXXXXXX</a> | Call us</div>
</div>
<div class="group">
<div class="icon"><i class="fa fa-map-marker fa-lg fa-fw"> </i>
</div>
<div class="text"><strong>505, Phulpukur Road, Chinsurah, Hooghly, 712101</strong> | Main Office</div>
</div>
</div>
</div>
テキストのIMGと右側の左側に等しい余裕を与えるためにどのように？ – Ayan
あなたは何を意味するか分かりません。 –
私は画像がコンテナのdiv境界に2つ近いことを意味します。私は彼らの中にもう少しシフトしてほしい。 – Ayan