试图使表格和面板在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