2014-10-30 64 views
0

我有這樣的定義:轉換HTML表格到幾格

<g:HTMLPanel ui:field="container" styleName="{style.itemcontainer}"> 
    <table style="width:100%" cellpadding="0" cellspacing="0" border="0" > 
    <tr> 
     <td width="25px" valign="bottom"> 
      <b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span> 
     </td> 

     <td width="60px"> 
      <span ui:field="valueLabel" class="{style.valueLabel}">0%</span> 
     </td> 

     <td width="24px" class="{style.selectedIcon}"> 
      <b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon> 
     </td> 
    </tr> 
    </table> 

</g:HTMLPanel> 

我想convet HTML表3個div's。

你能幫我嗎?

+0

聽說過的 「響應式設計」?這個想法粗略地說就是使用百分比寬度並將所有剩下的東西浮起來。更好的方法是使用Twitter的引導,它有內置的定義,即使出現不同在不同的設備大小不同寬度的CSS類。 – Adam 2014-10-30 07:42:52

+0

感謝亞當和抱歉,但我設計網頁上的知識是非常基本的。我會讀你的評論 – Jjreina 2014-10-30 07:45:53

回答

1

退房float和框模型。你可以用css簡化它。

<div style="float:left"> 
    <b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span> 
</div> 

<div style="float:left"> 
    <span ui:field="valueLabel" class="{style.valueLabel}">0%</span> 
</div> 

<div style="float:left"> 
    <b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon> 
</div> 
<br style="clear:left" />