如何獲得引導第一列第二行內容與第二列底線對齊？

-1

+-row3----------++-row9----------+  
|    | |   | 
|  | | 
|    | |Image 
+----------------+ |    
+-row3----------+ | 
|    | | 
| Need content | | 
| bottom align | | 
| here   | | 
|    | |    | 
+----------------+ +----------------+ 
-----------------------------------------------

我的如下HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-3"> 
 
      <div class="row"> 
 
     bootstrap table css - html table 
 
     bootstrap table css - html table 
 
     </div> 
 
      <div class="row"> 
 
     bootstrap table ----- Need this table to show at bottom align with same div as shown on beside column. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-9"> 
 
     The image is shown here - vertically large height than the first column. 
 

 
    </div> 
 
</div>

按照草圖，需要內容對齊底部。嘗試 - 垂直對齊：底部，但它不對齊。

來源

2017-02-09 dsi

不知道你想達到什麼。你可以解釋嗎。 – neophyte

把每一行放在單獨的'row' div中，並使用相同的'col-whatever'（在每一行中）對齊已添加行的列 – JustLearning

，但是與底部對齊問題。它看起來與提琴手相同。 – dsi

試試這個，如果有幫助。展開片段以全屏顯示。通過將height屬性設置爲div class="col-md-9"，可以實現圖像的高度。

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-3" style=""> 
 

 
     <div class="row"> 
 
      <div class="col-md-12" style="background-color: blue;"> 
 

 
      bootstrap table css - html table 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-12" style="background-color: red;"> 
 

 
      bootstrap table css - html table 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-9" style="background-color: green; height:40px;"> 
 
     Image shown here - vertically large height then first column. 
 

 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-09 11:55:22 neophyte

，Image是同一行的第二列。 – dsi

另外，添加div具有高度樣式，它增加了口裂，靠近底部。 <div style="height:200px;"></div>

謝謝

來源

2017-02-10 10:18:14 dsi

如何獲得引導第一列第二行內容與第二列底線對齊？

回答

相關問題