html - 无法拆分行和列的 div

Question

使用 Bootstrap 在 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>

也试试 bootstrap，它让生活变得轻松