如何将最右边的框向左移动，并且与box1和box2的大小相同

时间：2014-11-16 12:39:54

标签： html

我需要帮助才能将带有标题的最右边的盒子带到这里，这就是box3＆＃39;和id =＆＃34; bin＆＃34; 朝向左边的＆＃39;＆lt; - 这是按钮2＆＃39;和＆＃39;＆lt; - 这是按钮3＆＃39;。

最右边的盒子的大小应与其他两个盒子的大小相同。

<html>

<body>
<div align="center"><font color="red"><b><span id="Error_App"></span></b></font></div><br>
        <font size=3><b>This is box1 </b></font>
        <table border=0 width=100%>
        <tr>
        <td width=35%>
        <select multiple="multiple" id="teams" style="width:100%;" size="10">
        <option value=AA>teamA</option>
        <option value=BB>teamB</option>
        <option value=CC>teamC</option>
    </select>
        </td>
        <td width=10% align="left">
        <input title='SelectTeamMem.' type="button" id="btn_1" value="this is button 1 ->"></input>
        </td>
    <td width=50%  rowspan= "3" valign = "center">
        <font size=2>This is box 3</font>
        <br>
        <select multiple="multiple" id="bin"  style="width:100%;" size="10">
        </select>
        </td>
        </tr>
        <tr>
    <td>
    <div align="center"><font color="red"><b><span id="Error_App"></span></b></font></div><br>
        <font size=3><b>This is box 2 </b></font>
        </td>

        <td width=30% align="left">
        <input title='SelectTeamMem.' type="button" id="btn_2" value="<- this is button 2"></input>
    <br>
        <input title='SelectTeamMem.' type="button" id="btn_3" value="<- this is button 3"></input>

        </td>
        </tr>

        <tr>
        <td width=30% valign = "bottom">
        <select multiple="multiple" id="mems" style="width:100%;" size="10">
         <option value=16313>member1</option>
         <option value=16250>member2</option>
         <option value=15041>member3</option>
         <option value=15041>member4</option>
         <option value=15041>member5</option>
     </td>
        <td width=50% valign="center">
        <input title='SelectMembers' type="button" id="btn_4" value="this is button4 ->"></input>
        </td>
        </tr>
        </table>

1 个答案:

答案 0 :(得分：0)

远离<table>布局，没有人受伤！

如何在没有桌子的情况下摆放它？！

有两个至关重要的细节

对于这个例子，我们将严重依赖：

  1. display: inline-block - look for the simple explanation here - 基本上，内联块元素会将自己置于同一条线上，同时也允许宽度和高度

  2. vertical-align: middle - a little information here - 基本上，内联元素将在其行上垂直居中

    3. 基本布局

    我们的布局由五个关键构建块组成：

    1. 两个<div>与display: inline-block - 这会创建两列。

    2. 两个<select>与display: inline-block - 这允许第一个和第四个按钮在左列中的每个选项旁边对齐

    3. 带<button>的两个display: inline-block - 这些是按钮1和4，它们排列在每个<select>旁边

    4. <label>的三个display: block - 这会将标签带到各自的选择组之上

    5. 包裹这些元素的<form>被赋予适当的宽度margin: 0 auto以使所有内容水平居中。如果浏览器窗口不够宽，它会阻止右列在左下方滑动。

      6. 把所有东西放在一起，我们得到......

      example screenshot

      告诉我这个例子！

      当然，这是！您可以在底部运行代码段。

      div {
    display: inline-block;
    vertical-align: middle;
    padding: 20px 0 0 20px;
}
form {
    margin: 0 auto;
    width: 622px;
}

label {
    display: block;
    font-weight: bold;
}
select {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}
button {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

#btn_2, #btn_3 {
    display: block;
    margin: 1.5em 0 0 225px;
}
      <form>
  <div class="left">
     <label for="teams">This is box1</label>
     <select multiple="multiple" id="teams" size="10">
       <option value=AA>teamA</option>
       <option value=BB>teamB</option>
       <option value=CC>teamC</option>
     </select>

     <button name="SelectTeamMem" id="btn_1" value="this is button 1 ->">
      this is button 1 -&gt;
     </button>

     <button name="SelectTeamMem" id="btn_2" value="<- this is button 2">
      &lt;- this is button 2
     </button>

    <button name="SelectTeamMem" id="btn_3" value="<- this is button 3">
     &lt;- this is button 3
    </button>

   <label for="mems">This is box 2</label>
   <select multiple="multiple" id="mems" size="10">
    <option value=16313>member1</option>
    <option value=16250>member2</option>
    <option value=15041>member3</option>
    <option value=15041>member4</option>
    <option value=15041>member5</option>
   </select>

   <button name="SelectMembers" id="btn_4" value="this is button4 ->">
    this is button4 -&gt;
   </button>     
  </div>
       
  <div class="right">
    <label for="bin">This is box 3</label>
    <select multiple="multiple" id="bin" size="10">
    </select>
  </div>
</form>

相关问题
最新问题