问题
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.
Some links which I tried are: CSS align images and text on same line, Image and text on same line?, etc.
I tried and removed them. I am showing what I achieved on my own.
What I want to achieve?
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|
NOTE: I am using font awesome icon sets as the images.
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>回答1:
Absolute Positioning
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>Or 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>来源：https://stackoverflow.com/questions/36914199/alignning-text-and-image-on-same-line-while-maintaining-text-indent-relative-to