如何对齐几个文本和图像CSS

-1

enter image description here

这是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）my text 1 | 2）我的文字2 | 3）我的文字3

有人可以帮忙吗？

Regards

来源

2015-02-10 Nino

'white-space：nowrap;'不允许你的文本分行，那么内容与其他内容重叠。 – DaniP 2015-02-10 21:25:27

如果你想使用'white-space：nowrap'而不重叠其他文本，你会想'overflow：auto'。 – Jack 2015-02-10 21:27:56

-1

我建议使用引导程序作为您的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>

来源

2015-02-10 21:35:34 Neoaptt

您的三个容器的宽度是正确的，但whitespace: nowrap样式可以防止文本环绕。所以溢出显示它只是溢出。

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

这是因为列之间几乎没有空间 - 甚至没有空间来存放单个字符。随着inline block，使他们包裹

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

这不是伟大的格式虽然。另一种方法是将容器的字体大小设置为0.1px。然后它甚至可以适应格式化的标记： http://jsfiddle.net/q1g0uxx4/3/

来源

2015-02-10 21:41:15

如何对齐几个文本和图像CSS

回答

相关问题