ZK布局问题

Question

我对以下布局有意见。请给我一些如何创建下面布局的代码示例。如屏幕截图所示，我需要两个大小相等的部分。左边部分包含拉丁文本，右边是单选按钮和其他按钮。"From"字样应左对齐，金额和图标应右对齐。如何在ZK和ZK中以最佳方式构建此布局？

屏幕截图示例

Answer 1

您可以看到以下代码用于演示，并根据您的要求调整组件

<zk>
  <window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
    <hbox heights="40%,20%,40%"  width="100%" height="100%">
          <borderlayout width="100%" height="100%">
            <center>
               Here is My Content
            </center>
          </borderlayout>
          <borderlayout width="100%" height="100%">
             <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <checkbox />
              <checkbox />
               <checkbox />
               </vbox>
          </center>
          </borderlayout>
    <splitter width="100%"/>
          <borderlayout width="100%" height="100%">
            <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <label value = "hariom123"/>
               <label value = "hariom123"/>
               <label value = "hariom123"/>
              </vbox>
            </center>
          </borderlayout>
    </hbox>
  </window>
</zk>

您可以在Zk Fiddle 中运行上述代码

Answer 2

考虑到您提供的详细程度，我很难回答这个问题。在未来，请发布一些代码，显示你已经尝试过的内容以及为什么它不起作用。有了这些，我们可以很快让您回到正轨。你在这里的问题只是在寻找代码=/

<hlayout hflex="1">
    <!--
        size/flex on labels doesn't work, wrap label in a div to control size
    -->
    <div hflex="1">
        <label value="lorem ipsum.."/>
    </div>
    <grid hflex="1">
        <columns>
            <!--
                Last column is small, first two share available space.
            -->
            <column>
            <column>
            <column width="30px">
        </columns>
        <rows>
            <row>
                <radio label="This is a radio button"/>
                <label value="From: 100,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 2"/>
                <label value="From: 200,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 3"/>
                <label value="0,00 $"/>
                <image src="info.png"/>
            <row>
        </rows>
    </grid>
</hlayout>

还有许多其他方法可以获得此布局。我在div旁边选择了一个grid，这样右边的单选按钮、标签和图标就可以保证排列整齐。不过你还有其他选择。

附言：当然你需要应用CSS来使ZK网格不那么花哨。