無法分割DIV的行和列

Question

開創了引導MVC5這個應用....

我已經加入DIV：

<div class="divFullWidth" style="margin:10px 0px 0px -15px; height:150px;background-color:grey;"> 
    <div class="wireframe_div"> 

     <div class="Row"> 
      <div class="Cell"> 
       @Html.Label("Ext :") 
      </div> 
     </div> 
     <div class="Row"> 
      <div class="Cell"> 
       @Html.TextBox("txt_Ext", null, new { @class = "form-control" }) 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.wireframe_div { 
    border: 1px solid black; 
    background-color: darkgrey; 
    padding: 15px 20px 25px 20px; 
.Cell 
    { 
     display: table-cell;   
     padding-left: 5px; 
     padding-right: 5px; 

    } 
.Row 
    { 
     display: table-row; 
    } 
    .divFullWidth { 
     float: left; 
     width: 100%; 

} 

但我不能完全像在屏幕截圖中一樣拆分div。

任何人都可以幫忙。我對網絡技術很陌生。

Answer 1

<div style="width: 100%; height: 150px;"> 
     <div style=" width: 100%; height: 30%;"> 
     Ext <input type="text" style="width: 35%;"/> 
     Area <input type="text" style="width: 10%;"/> 
     </div> 
     <div style="width: 50%; height: 70%; float: left; text-align: center;"> 
     Activity Catagory <input type="text" style="width: 80%;"/> 
     </div> 
     <div style="width: 50%; height: 70%; float: right;"> 
      <div style="width: 50%; height: 100%; float: right; text-align: center;"> 
       Activity Date To<input type="text" style="width: 80%;"/> 
      </div> 
      <div style="width: 50%; height: 100%; float: left; text-align: center;"> 
      Activity Date From <input type="text" style="width: 80%;"/> 

      </div> 
     </div> 

    </div> 

還嘗試引導它讓生活變得簡單