如何垂直排列不同高度的DIV

时间：2015-01-01 13:13:42

标签： html css

正如你所看到的，我并不是最好用CSS而且我很难将div垂直排列在中间。 我不知道自己应该尝试什么，所以我的CSS必定是根本不对的。

仅供参考：我不能使用标签作为输入控件。

You can get my fiddle here.

＆＃13;
＆＃13; 
    .lbl-ctrl-unit{
        padding-top:2px;
        padding-bottom:2px;
        float:left;
        margin-left:auto;
        margin-right:auto;
        height:auto;
        clear:both;
    }
    .lbl-control{
        background-color:#D9EDF7;
        border: 1px solid #6FA7D1; 
        border-radius:5px;
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
        padding:3px;
        width:100px;
        display: inline-block ;
        height:auto;
    }
    .input-ctrl{
        display: inline-block ;
        position: relative;
        padding-left:5px;
        padding-right:2px;        
    }
    .btn-small{
        display: inline-block ;
        position: relative;
        padding-left:5px;
        padding-right:2px;        
        width:25px;
        height:25px;
        /*background: url(../../images/plus_circle.png) no-repeat center center;*/
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
        cursor:pointer;
        border-radius:5px;
        text-align:center;
    }
    .btn-small:hover{ border: 1px solid #6FA7D1;transition: all 0.5s; }

    input[type=text] { border: 1px solid #6FA7D1; outline:0; height:25px;  padding-left: 5px; font-family:Arial; font-size:12px; transition: all 0.4s; border-radius:5px;float:left; }
    input[type=text]:hover{ background-color: #D9EDF7;}
    input[type=text]:focus { background-color: #D9EDF7;}
＆＃13; 
    <div class="lbl-ctrl-unit">
        <div class="lbl-control">xxxx xxxx xxx xxx x:</div> 
        <div class="input-ctrl"><input type="text" id="txt1" style="width: 200px" readonly="readonly" /></div>
        <div class="btn-small" onclick="alert('You are clicking on me');"></div>
    </div>

    <div class="lbl-ctrl-unit">
        <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div> 
        <div class="input-ctrl"><input type="text" id="txt2" style="width: 200px" readonly="readonly" /></div>

    </div>

    <div class="lbl-ctrl-unit">
        <div id="strain" class="lbl-control">Strain:</div> 
        <div class="input-ctrl FocusSense"><input type="text" id="txtBactName" style="width: 270px"/></div>
    </div>
＆＃13;
＆＃13;
＆＃13;

编辑：

这是我尝试设置的布局：

enter image description here

2 个答案:

答案 0 :(得分：1)

如果您将其位置设置为inline，容器的line-height设置为与其height相同的值，则可以垂直对齐元素，然后应用vertical-align:middle到容器：

还要注意white-space:nowrap;阻止按钮换行到容器div中的第2行，并且由于我们从按钮的位置移除了block，您可以将其拉伸到它的大小通过应用更大的padding-left（删除它以查看会发生什么）

＆＃13;
＆＃13; 
  .lbl-ctrl-unit {
      padding-top:2px;
      padding-bottom:2px;
      float:left;
      height:50px;
      line-height:50px;
      vertical-align:middle;
      white-space:nowrap;
  }

  .lbl-control {
      background-color:#D9EDF7;
      border: 1px solid #6FA7D1;
      border-radius:5px;
      font-family:Arial;
      font-size:12px;
      font-weight:bold;
      padding:3px;
      display: inline;
      height:auto;
  }
  .input-ctrl {
      display: inline;
      position: relative;
      padding-left:5px;
      padding-right:2px;
  }
  .btn-small {
      display: inline;
      position: relative;
      padding-left:25px;
      width:50px;
      height:25px;
      /*background: url(../../images/plus_circle.png) no-repeat center center;*/
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
  }
  .btn-small:hover {
      border: 1px solid #6FA7D1;
      transition: all 0.5s;
  }
  input[type=text] {
      border: 1px solid #6FA7D1;
      outline:0;
      height:25px;
      padding-left: 5px;
      font-family:Arial;
      font-size:12px;
      transition: all 0.4s;
      border-radius:5px;
  }
  input[type=text]:hover {
      background-color: #D9EDF7;
  }
  input[type=text]:focus {
      background-color: #D9EDF7;
  }
＆＃13; 
<div class="lbl-ctrl-unit">
    <div class="lbl-control">xxxx xxxx xxx xxx x:</div>
    <div class="input-ctrl">
        <input type="text" id="txt1" style="width: 200px" readonly="readonly" />
    </div>
    <div class="btn-small" onclick="alert('You are clicking on me');"></div>
</div>
<div class="lbl-ctrl-unit">
    <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div>
    <div class="input-ctrl">
        <input type="text" id="txt2" style="width: 200px" readonly="readonly" />
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

<强>更新

如果您不介意使用CSS3，您可以将容器转换为弹性框并将子文本框的边距设置为自动，它也会将它们置于中心位置：

＆＃13;
＆＃13; 
  .lbl-ctrl-unit {
      padding-top:2px;
      padding-bottom:2px;
      float:left;
      margin-left:auto;
      margin-right:auto;
      height:auto;
      clear:both;
      display:flex;
  }
  .lbl-control {
      background-color:#D9EDF7;
      border: 1px solid #6FA7D1;
      border-radius:5px;
      font-family:Arial;
      font-size:12px;
      font-weight:bold;
      padding:3px;
      width:100px;
      display: inline-block;
      height:auto;
  }
  .input-ctrl {
      margin:auto;
      display: inline-block;
      position: relative;
      padding-left:5px;
      padding-right:2px;
  }
  .btn-small {
      display: inline-block;
      position: relative;
      padding-left:5px;
      padding-right:2px;
      width:25px;
      height:25px;
      /*background: url(../../images/plus_circle.png) no-repeat center center;*/
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
  }
  .btn-small:hover {
      border: 1px solid #6FA7D1;
      transition: all 0.5s;
  }
  input[type=text] {
      border: 1px solid #6FA7D1;
      outline:0;
      height:25px;
      padding-left: 5px;
      font-family:Arial;
      font-size:12px;
      transition: all 0.4s;
      border-radius:5px;
      float:left;
  }
  input[type=text]:hover {
      background-color: #D9EDF7;
  }
  input[type=text]:focus {
      background-color: #D9EDF7;
  }
＆＃13; 
<div class="lbl-ctrl-unit">
    <div class="lbl-control">xxxx xxxx xxx xxx x:</div>
    <div class="input-ctrl">
        <input type="text" id="txt1" style="width: 200px" readonly="readonly" />
    </div>
    <div class="btn-small" onclick="alert('You are clicking on me');"></div>
</div>
<div class="lbl-ctrl-unit">
    <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div>
    <div class="input-ctrl">
        <input type="text" id="txt2" style="width: 200px" readonly="readonly" />
    </div>
</div>
<div class="lbl-ctrl-unit">
    <div id="strain" class="lbl-control">Strain:</div>
    <div class="input-ctrl FocusSense">
        <input type="text" id="txtBactName" style="width: 270px" />
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

div#someid {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
相关问题
最新问题