2014-10-30 65 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" />