在同一行上对齐文本和图像，同时保持相对于容器大小的文本缩进 [英] Alignning text and image on same line while maintaining text indent relative to the container size
问题描述
我已经搜索了关于stackoverflow的问题，但是没有一个我尝试过.他们中的大多数人扭曲了我实际上想要实现的目标.我想知道我要去哪里或我想念什么.
I have searching through questions on stackoverflow but none of them which I tried worked. Most of them distorts what I actually want to achieve. I would like to know where I am going wrong or what I am missing.
我尝试过的一些链接是: CSS在同一行上对齐图像和文本，图片和文字在同一行吗?，等等.
我尝试并删除了它们.我在展示自己取得的成就.
I tried and removed them. I am showing what I achieved on my own.
我想实现什么?
1)即使容器大小发生变化，我也希望文本自动调整其大小.
2)调整文字大小时，应保持缩进.
示例:
| img |-|文字行1 |
|文本第2行|
1) I want the text to automatically resize themselves even when container size changes.
2) When the text resizes it should maintain the indentation.
Example:
|img|--|Text line 1|
|Text line 2|
注意: 我正在使用超棒的字体图标集作为图像.
更新:Paulie_D的答案有效，但没有响应.检查 http://design.google.com/resizer/#device=handset&url=http%3A%2F%2Fhungry.pe.hu%2Fhelp&width=720
UPDATE: Paulie_D answer works but is not responsive. Check 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:support@hungry.pe.hu" class="help">support@hungry.pe.hu</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>
推荐答案
绝对定位
将.icon div完全定位在.group容器的某些填充内.
Position the .icon div absolutely inside some padding on the .group container.
我在这里限制了身体的宽度，以显示行为.
I've restricted the body width here to show the behaviour.
body {
margin: 1em 10em;
/* to show behaviour */
}
#org_info_details {
padding-left: 10px;
padding-right: 10px;
font-family: 'Montserrat';
font-size: 14px;
}
.group {
margin-bottom: 20px;
padding-left: 2em;
position: relative;
}
.icon {
color: #ED734F;
position: absolute;
left: 0;
}
.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_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:support@hungry.pe.hu" class="help">support@hungry.pe.hu</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>
或 Flexbox
body {
margin: 2em 10em;
}
#org_info_details {
padding-left: 10px;
padding-right: 10px;
font-family: 'Montserrat';
font-size: 14px;
}
.group {
margin-bottom: 20px;
padding-left: 2em;
display: flex;
}
.icon {
color: #ED734F;
}
.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_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:support@hungry.pe.hu" class="help">support@hungry.pe.hu</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>
这篇关于在同一行上对齐文本和图像，同时保持相对于容器大小的文本缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
