我已经在stackoverflow上搜索了一些问题，但我没有尝试过这些问题。他们中的大多数都扭曲了我实际想要实现的目标。我想知道我哪里出错或者我错过了什么。
我尝试过的一些链接是： CSS align images and text on same line，Image and text on same line?等
我试过并删除了它们。我正在展示我自己取得的成就。
我想要达到什么目标？
1）我希望即使容器大小发生变化，文本也会自动调整大小
2）当文本调整大小时，应保持缩进。
示例：
| img | - |文本行1 |
|文本行2 |
注意： 我使用字体真棒图标集作为图片。
更新：Paulie_D回答有效但无响应。查看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>
答案 0 :(得分：0)
绝对定位
将.group div绝对放在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>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;
}
或 Flexbox
<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>import javax.swing.*;
import java.awt.*;
public class PongFrame extends JFrame {
private JLabel scoreLabel;
private JLabel pointsLabel;
public PongFrame () {
this.setTitle("Game");
this.setSize(1100,600);
this.scoreLabel = new JLabel("score");
this.pointsLabel = new JLabel("");
JPanel labelPanel = new JPanel();
labelPanel.setLayout(new GridLayout(1,2));
labelPanel.add(scoreLabel);
labelPanel.add(pointsLabel);
JPanel gameArea = new JPanel();
gameArea.setBackground(Color.orange);
gameArea.setSize(800,600);
Container con = this.getContentPane();
con.setLayout(new GridLayout(1,2));
con.add(gameArea);
con.add(labelPanel);
this.setVisible(true);
this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
}
public void setPoints (String labeltext){
this.pointsLabel.setText(labeltext);
}
public static void main (String [] args){
PongFrame window = new PongFrame();
window.pointsLabel.setText("0");
}
}