試圖使表格和面板在html中對齊

Question

我正在嘗試在屏幕的右側獲得四個panels在這些panels的左側創建一個table 。 我的問題是， table高度不夠高時， panels會在table下方移動，而不是停留在左側。 我正在使用引導主題。

<div class="row">
    <!-- Start Of Projects Table -->
    <div class="col-lg-8 pull-right">
       <!--table-->
    </div>
    <!-- End of projects table -->
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
    </div>
</div>

Answer 1

那是因為您應該使用div元素中的表格，對於4個面板，您應該使用另一個“行”。

<div class="row">
  <div class="col-lg-8 pull-right">
   <!-- Start Of Projects Table -->
   <!--table-->
   <!-- End of projects table -->
  </div>
  <div class="col-lg-4 pull-left settings">
     <div class="row">
       <div class="col-lg-12 pull-left settings">
        <!--Panel Code -->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code -->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code-->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code-->
       </div>
     </div>
  </div>
</div>

Answer 2

您應該在那里做父母div。 像這樣：

 <div class="row">
   <div style="float:left; width:50%;">
     <div class="col-lg-8 pull-right">
       <!--table-->
     </div>
   </div>
   <div style="float:right; width:50%;">
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
     </div>
   </div>
</div><!--End of Row-->

Bootstrap確實有一個類。 如果我記得使用class="col"這樣的方法，則可以在該行中創建列，並且還可以完全響應。 檢查此基本模板。 它會幫助您了解更多。 http://getbootstrap.com/getting-started/#template