HTML / CSS - Divs无法正确对齐

Question

我试图正确对齐这些div，但他们会随意重新定位！我尝试将balance水平对齐history，而transact垂直对齐balance。

编辑：.button样式无关紧要。

HTML：

<div id="main-page-content">
<div id="balance">
   <u>Balances</u>
<div class="total-balance">
    Total Balance: 
</div>
<div class="a-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a>
    </div>
<div class="b-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a> 
    </div>
</div>
<div id="transact">
</div>
<div id="history">     
</div>

CSS：

#main-page-content {
   max-width:960px;
   margin:auto;
   max-height: 500px;
   padding-top:25px;
   height:100%;
}

#balance {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
}

#transact {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
    margin-top:10px;
}

#history {
   background-color:#00253F;
   width:32%;
   height:300px; 
   float:right;
}

.total-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.a-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.b-balance {
    padding-top: 8px;
    padding-bottom:8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

上述代码或结帐This Demo

的结果

Answer 1

你只需要在你的html中将历史移到上面交易：

 <div id="history">Hist
 </div>
 <div id="transact">Trans
 </div>

＆＃13;

＆＃13;

#main-page-content {
  max-width: 960px;
  margin: auto;
  max-height: 500px;
  padding-top: 25px;
  height: 100%;
}
#balance {
  font-family: Lato;
  background-color: #00253F;
  color: #FFFFFF;
  font-size: 24px;
  padding-left: 15px;
  font-weight: bold;
  padding-right: 10px;
  padding-top: 15px;
  height: 130px;
  width: 52%;
  float: left;
}
#transact {
  font-family: Lato;
  background-color: #00253F;
  color: #FFFFFF;
  font-size: 24px;
  padding-left: 15px;
  font-weight: bold;
  padding-right: 10px;
  padding-top: 15px;
  height: 130px;
  width: 52%;
  float: left;
  margin-top: 10px;
}
#history {
  background-color: #00253F;
  width: 32%;
  height: 300px;
  float: right;
  color: #fff
}
.total-balance {
  padding-top: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}
.a-balance {
  padding-top: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}
.b-balance {
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}

＆＃13;

<div id="main-page-content">
  <div id="balance">
    <u>Balances</u>
    <div class="total-balance">
      Total Balance:
    </div>
    <div class="a-balance">
      Balance:
      <a href="#" class="button">Deposit</a>
      <a href="#" class="button">Withdraw</a>
    </div>
    <div class="b-balance">
      Balance:
      <a href="#" class="button">Deposit</a>
      <a href="#" class="button">Withdraw</a>
    </div>
  </div>
  <div id="history">Hist
  </div>
  <div id="transact">Trans
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是由于在浏览器中处理float的方式。我建议如果你想要做两个列来围绕整个文档做两个包装列，或者使用一个可以帮助你长期运行的网格框架。

我设置了一个jsfiddle来帮助说明这一点：JSFiddle

<强> HTML

0

<强> CSS

<h1>Using floats</h1>
<div>
    Only the items you want to distort should be floated...
</div>
<div id="main-page-content">
<div id="balance">
   <u>Balances</u>
<div class="total-balance">
    Total Balance: 
</div>
<div class="a-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a>
    </div>
<div class="b-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a> 
    </div>
</div>
<div id="transact">
</div>
<div id="history">     
</div>

<h1>Using inline-block positioning</h1>
<div>
    This personally is my favorite.  Allows for positioning and responsiveness without css hacks to make sure sizes match up.
</div>
<div id="main-page-content-2">
    <div id="col-1">
        <div id="balance">
           <u>Balances</u>
           <div class="total-balance">
                Total Balance: 
           </div>
           <div class="a-balance">
                Balance:
                <a href="#" class="button"/>Deposit</a>
                <a href="#" class="button"/>Withdraw</a>
           </div>
           <div class="b-balance">
                Balance:
                <a href="#" class="button"/>Deposit</a>
                <a href="#" class="button"/>Withdraw</a> 
           </div>
        </div>
        <div id="transact">
        </div>
</div>
<div id="column-2">
    <div id="history-inline">     
        history
    </div>
</div>

基本上处理这些问题的更好方法是通过受控浮动，或者使用内联块定位更好。

Answer 3

如果您想要的是将历史记录放在父div的顶部，因为它就像一个网格，您应该使用历史记录上面的历史记录。

<div id="history">Hist
</div>
<div id="transact">Trans
</div>