Question

我现在试图从建筑布局的表格方式转移到div，我看到很多争论。我注意到很多人都要求转移到div。我在div中找到的问题，例如下面的代码，我指的是模板。我的问题是，在不同的分辨率，它看起来不同，没有像修复大小。例如。在一些分辨率中它只是很好而有些它缩小了。什么是最好的解决方案，以确保它保持在我知道的每一个决议，如果我回到桌子它会工作，但我认为这是不可取的。

<body>


    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                 <img alt="Logo" src="img/logo20.png" /> 

                <!-- theme selector starts -->
                <div class="btn-group pull-right theme-container" >

                    <h5>User Name:  my demo</h5>
                    Logout
                </div>



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

        <div class="container-fluid">
        <div class="row-fluid">

            <!-- left menu starts -->
            <div class="span2 main-menu-span">
                <div class="well nav-collapse sidebar-nav">
                    <ul class="nav nav-tabs nav-stacked main-menu">
                        <li class="nav-header hidden-tablet">Vtst1</li>
                        <li><a class="ajax-link" href="test1.php"><i class="icon-home"></i>  <span class="hidden-tablet">Test1</span></a></li>
                        <li><a class="ajax-link" href="test2.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">Test2</span></a></li>

                        <li class="nav-header hidden-tablet">Admin</li>
                        <li><a class="ajax-link" href="addM.php"><i class="icon-home"></i>  <span class="hidden-tablet">Master</span></a></li>
                        <li><a class="ajax-link" href="gridU.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">UD</span></a></li>


                        </ul>

                </div><!--/.well -->
            </div>
                        <!--/span-->
            <!-- left menu ends -->



            <div id="content" class="span10">
            <!-- content starts -->


            <div>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Home</a> <span class="divider">/</span>
                    </li>
                    <li>
                        <a href="#">Forms</a>
                    </li>
                </ul>
            </div>


            <div class="row-fluid ">
                <div class="box span6">
                    <div class="box-header well" data-original-title>
                        <h2>Add Master</h2>

                    </div>
                    <div class="box-content">
                        <form class="form-horizontal">
                            <fieldset>


                              <div class="control-group">
                                <label class="control-label" for="selectError3">Master Type</label>
                                <div class="controls">
                                  <select id="selectError3">
                                    <option>T1</option>
                                    <option>T2</option>
                                    <option>T3</option>

                                  </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label" for="inputSuccess">Master Serial Number</label>
                                <div class="controls">
                                  <input type="text" id="inputSuccess">

                                </div>
                              </div>
                              <div class="form-actions">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button class="btn">Cancel</button>
                              </div>
                            </fieldset>
                          </form>

                    </div>
                </div><!--/span-->


              <div class="box span6 ">
                    <div class="box-header well" data-original-title>
                        <h2>Active Masters</h2>


                    </div>
                    <div class="box-content">
                        <table class="table table-striped table-bordered  datatable">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>Master Type</th>

                              </tr>
                          </thead>   
                          <tbody>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T111</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T112</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                                                  </tbody>
                         </table>
                    </div>
                </div><!--/span-->


              </div><!--/row-->




                    <!-- content ends -->
            </div><!--/#content.span10-->


            </div><!--/fluid-row-->

Answer 1

如果你想要响应式布局，那么你可以给你的div的宽度百分比，如果你想要四个div然后给出宽度：25％;每个div 获得你想要的东西是最简单的方法，你也可以转移到像bootstrap或纯css这样的框架......

Answer 2

您似乎需要一个自适应布局（页面上的组件会根据当前的查看分辨率进行更改和更改）。从您的div类的外观来看，您似乎正在使用Bootstrap。 Bootstrap有一个非常可爱的grid system，它应该适合你正在寻找的东西。

简而言之，您希望在row中将页面中的不同细分包装起来并指定col。 Bootstrap将您的页面划分为12个相等的段，您可以决定每个段中的内容（col）。

因此，例如，您的网页看起来像这样：

<div class="row">
<!-- Left Menu Column -->
<div class="col-md-3">

    <!-- left menu starts -->
    <div class="span2 main-menu-span">
        <div class="well nav-collapse sidebar-nav">
            <ul class="nav nav-tabs nav-stacked main-menu">
                <li class="nav-header hidden-tablet">Vtst1</li>

                <li><a class="ajax-link" href="test1.php"><i class="icon-home"></i>  <span class="hidden-tablet">Test1</span></a></li>
                <li><a class="ajax-link" href="test2.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">Test2</span></a></li>

                <li class="nav-header hidden-tablet">Admin</li>
                <li><a class="ajax-link" href="addM.php"><i class="icon-home"></i>  <span class="hidden-tablet">Master</span></a></li>
                <li><a class="ajax-link" href="gridU.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">UD</span></a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Center Content Column -->
<div class="col-md-6">

    <!-- Insert Content Here -->

</div>

<!-- Right Menu Column -->
<div class="col-md-3">

    <!-- Insert Content Here -->

</div>

请注意，col-x-x部分可能会根据您的需求而有所不同（有关具体信息，请参阅Bootstrap＆＃39; grid documentation）。我还没有看到<div class="container-fluid">和<div class="row-fluid">的CSS规则，但我很确定你不会因为这个简单的布局而需要它们。 Bootstrap为您提供适当的CSS。

希望这会有所帮助，并且非常适合留下桌面布局。：）

Answer 3

考虑新的flexbox CSS布局方法。它很好地将盒子模型与table显示的更有用的方面相结合：

垂直对齐毫不费力
水平间距与元素数量分离

等优势包括：

能够任意订购元素
在列与行中显示元素
更好地控制白色空间的分布方式

保持div具有与表相同的效果

3 个答案: