如何在CSS中对齐多个文本和图像

Question

看一下我的问题的截图：

这是html代码：

   <div class="parent_process">  
      <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
      <div class="second_process"><img src="images/contacter-tous-les-vendeurs-autocommutateurs.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
     <div class="third_process"><img src="images/recevoir-offre-standard-telephonique-pas-cher.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
</div>

这是css代码：

.parent_process{ width:100%; white-space:nowrap; }
.parent_process div{ display:inline-block; width:33.3%;}
.first_process{ text-align:left; }
.second_process{ text-align:center; }
.third_process{ text-align:right; }

我如何拥有3列： 1）我的文字1 | 2）我的文字2 | 3）我的文字3

有人可以帮忙吗？

此致

Answer 1

您的三个容器宽度正确，但whitespace: nowrap样式会阻止文本换行。因此，溢出显示它只会溢出。

如果删除whitespace: nowrap，您的文字将保持在容器的宽度范围内。但是，您会注意到一个新问题。列不适合单行： http://jsfiddle.net/q1g0uxx4/2/

这是因为列之间几乎没有空间 - 甚至不是单个字符的空间。使用inline block，会导致它们换行

您可以删除div之间的所有空格，它们将适合： http://jsfiddle.net/q1g0uxx4/1/

这对于格式化来说并不是很好。另一种方法是将容器的字体大小设置为0.1px。然后它甚至适合格式化标记： http://jsfiddle.net/q1g0uxx4/3/

Answer 2

我建议使用bootstrap作为你的css框架。他们有一个很好的柱系统。

JSFiddle

css就像col-sm-4一样简单。

<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>
<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>
<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>