左右布局

Posted 2021-02-04 yuyedaocao

1、左侧不居中

 

css：

 

<style>

　　 /*float*/

　　.s-left{float: left;width: 70px;}

　　.s-right{margin-left: 70px;}

　　/*flex*/

　　.d-flex{display: flex;}

　　.d-left{flex: 0 0 70px;}

　　/*table*/

　　.t-table{display: table;}

　　.t-left{display: table-cell;width: 70px;    }

</style>

 

html：

<div style="width:400px;">

        <h4 class="margin-bottom20">1、bootscript网格</h4>

        <div class="row">

            <div class="col-md-12">

                 <div class="col-md-2">选择</div>

                 <div class="col-md-10">

                    <button class="btn btn-default">1</button>

                 </div>

            </div>

         </div>

         <hr>

         <h4 class="margin-bottom20">2、左浮动,width + 右margin-left</h4>

         <div style="position:relative">

          　<div class="s-left text-center">

                <span class="sp">选择</span>

             </div>

             <div class="s-right">

                <button class="btn btn-default">1</button>

             </div>

         </div>

         <hr>

         <h4 class="margin-bottom20">3、display:flex+ 左flex: 0 0 70px;</h4>

         <div class="d-flex">

             <div class="d-left text-center">选择</div>

             <div class="d-right">

                 <button class="btn btn-default">1</button>

             </div>

         </div>

         <hr>

         <h4 class="margin-bottom20">4、display:table + 左table-cell,width</h4>

         <div class="t-table">

            <div class="t-left text-center">选择</div>

            <div class="t-right">

                <button class="btn btn-default">1</button>

            </div>

         </div>

    </div>