如何對齊幾個文本和圖像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

回答

相關問題