DIV + CSS 流式排版应用

来源：互联网发布：微星淘宝买好还是京东编辑：程序博客网时间：2024/06/05 18:27

使用 block-level elements (块级元素)的float属性实现流式排版。
文本标签label是inline elements (内联元素)，使用display: block样式转换为块级元素（亦可用display: inline-block），使可设置宽度高度等。
使用CSS 相邻兄弟选择器选择必填项的标签，因此将label放在其对应的输入控件后，使用float:left;使其浮动到输入控件左侧。

.div_control input[required]+label{    color: #ffba02;}.div_control input[required]+label:before {  content:'*';  margin-right:5px;}

通过css给必填项的标签加*号标识，使用css:before添加伪元素。

html代码和css代码示例如下：

    <form id="form_main">        <!-- 基础信息 -->        <div id="div_baseInfo" class="div_control">            <div>                <input type="text" id="netName" name="netName" required>                <label class="required" for="netName">新路网名称</label>                <input type="hidden" id="id" name="id" value="${id}">            </div>            <div>                <input type="text" id="roadCode" name="roadCode" required>                <label for="roadCode">高速路编码</label>            </div>            <div>                <input type="text" id="lastNewNetName" name="lastNewNetName" readonly>                <label for="lastNewNetName">上一路网</label>                <input type="hidden" id="lastNewNetId" name="lastNewNetId">            </div>            <div>                <input type="text" id="startHubCode" name="startHubCode" readonly onclick="selHub('#div_startHub')" required>                <label for="startHubCode">起始枢纽</label>                <input type="checkbox" id="startHubIsNew" name="startHubIsNew" onclick="startHubIsNewChange(this)" /><span>新建</span>              </div>            <div>                <input type="text" id="endHubCode" name="endHubCode" readonly onclick="selHub('#div_endHub')">                <label for="endHubCode">讫止枢纽</label>                <input type="checkbox" id="endHubIsNew" name="endHubIsNew" onclick="endHubIsNewChange(this)" /><span>新建</span>            </div>            <div>                <input type="number" step="0.00001" id="lastNewTollDistance" name="lastNewTollDistance" title="讫止枢纽与上一节点距离">                        <label for="lastNewTollDistance" title="讫止枢纽与上一节点距离">与上一节点距离</label>            </div>            <div>                <input type="text" id="enableDate" name="enableDate" required>                      <label for="enableDate">启用年</label>            </div>            <div>                <input type="text" id="statusName" name="statusName" disabled="disabled">                <label for="statusName">状态</label>            </div>            <div>                <input type="text" id="remark" name="remark">                       <label for="remark">备注</label>                  </div>              </div>        <div style="clear: both;"></div>        <!-- 起始枢纽 -->        <fieldset>        <legend>起始枢纽 </legend>        <div id="div_startHub" style='display:none' class="div_control">        <div>            <input type="text" id="startHub_code" name="code" onchange="$('#startHubCode').val(this.value)" required>                  <label for="startHub_code">编码</label>        </div>                      <div>            <input type="text" id="startHub_name" name="name" required>                 <label for="startHub_name">名称</label>        </div>        <div>            <input type="number" step="0.000001" id="startHub_longitude" name="longitude" onclick="selMapPoint(this)" required>                 <label for="startHub_longitude">经度</label>        </div>        <div>            <input type="number" step="0.000001" id="startHub_latitude" name="latitude" required>                   <label for="startHub_latitude">纬度</label>        </div>        <div>            <input type="text" id="startHub_devisionName" name="devisionName">                  <label for="startHub_devisionName">行政区划</label>        </div>        <div>            <input type="text" id="startHub_cityName" name="cityName" disabled="disabled">                  <label for="startHub_cityName">市</label>            <input type="hidden" id="startHub_cityCode" name="cityCode">        </div>        <div>            <input type="text" id="startHub_countyName" name="countyName" readonly onclick="selCounty(this)" required>            <label for="startHub_countyName">区/县</label>                        <input type="hidden" id="startHub_countyCode" name="countyCode">            <input type="hidden" id="startHub_areaCode" name="areaCode"><!-- 市辖区与县市编码 -->        </div>        <div>            <input type="text" id="startHub_adjoin1Code" name="adjoin1Code" readonly onclick="selNode(this,'#div_startHub')">                   <label for="startHub_adjoin1Code">相邻节点1编码</label>        </div>        <div>            <input type="number" step="0.00001" id="startHub_adjoin1Distance" name="adjoin1Distance">                   <label for="startHub_adjoin1Distance">相邻节点1距离</label>        </div>        <div>            <input type="text" id="startHub_adjoin2Code" name="adjoin2Code" readonly onclick="selNode(this,'#div_startHub')">                   <label for="startHub_adjoin2Code">相邻节点2编码</label>        </div>        <div>            <input type="number" step="0.00001" id="startHub_adjoin2Distance" name="adjoin2Distance">                   <label for="startHub_adjoin2Distance">相邻节点2距离</label>        </div>        </div>        </fieldset>        <div style="clear: both;"></div>        <!-- 讫止枢纽 -->        <fieldset>        <legend>讫止枢纽 </legend>        <div id="div_endHub" style='display:none' class="div_control">        <div>            <input type="text" id="endHub_code" name="code" onchange="$('#endHubCode').val(this.value)" required>                  <label for="endHub_code">编码</label>        </div>                      <div>            <input type="text" id="endHub_name" name="name" required>                   <label for="endHub_name">名称</label>        </div>        <div>            <input type="number" step="0.000001" id="endHub_longitude" name="longitude" onclick="selMapPoint(this)" required>                   <label for="endHub_longitude">经度</label>        </div>        <div>            <input type="number" step="0.000001" id="endHub_latitude" name="latitude" required>                 <label for="endHub_latitude">纬度</label>        </div>        <div>            <input type="text" id="endHub_devisionName" name="devisionName">                    <label for="endHub_devisionName">行政区划</label>        </div>        <div>            <input type="text" id="endHub_cityName" name="cityName" disabled="disabled">                    <label for="endHub_cityName">市</label>            <input type="hidden" id="endHub_cityCode" name="cityCode">        </div>        <div>            <input type="text" id="endHub_countyName" name="countyName" readonly onclick="selCounty(this)" required>            <label for="endHub_countyName">区/县</label>                      <input type="hidden" id="endHub_countyCode" name="countyCode">            <input type="hidden" id="endHub_areaCode" name="areaCode"><!-- 市辖区与县市编码 -->        </div>        <div>            <input type="text" id="endHub_adjoin1Code" name="adjoin1Code" readonly onclick="selNode(this,'#div_endHub')">                   <label for="endHub_adjoin1Code">相邻节点1编码</label>        </div>        <div>            <input type="number" step="0.00001" id="endHub_adjoin1Distance" name="adjoin1Distance">                 <label for="endHub_adjoin1Distance">相邻节点1距离</label>        </div>        <div>            <input type="text" id="endHub_adjoin2Code" name="adjoin2Code" readonly onclick="selNode(this,'#div_endHub')">                   <label for="endHub_adjoin2Code">相邻节点2编码</label>        </div>        <div>            <input type="number" step="0.00001" id="endHub_adjoin2Distance" name="adjoin2Distance">                 <label for="endHub_adjoin2Distance">相邻节点2距离</label>        </div>        </div>        </fieldset>      <div style="clear: both;"></div>                           <!-- 收费站明细表 -->         <div id="div_tollDetails">           <div class="c-title">收费站明细</div>           <div>             <table>               <thead>                 <tr style="font-size:14px;background-color:#32D5DA;">                   <th>序号</th>                   <th>编码</th>                   <th>名称</th>                   <th>经度</th>                   <th>纬度</th>                   <th>行政区划</th>                   <th>市</th>                   <th>区/县</th>                   <th>上一节点距离</th>                   <th>操作</th></tr>               </thead>               <tbody id="tb_tollDetails">                 <tr>                   <td>                     <input type="number" name="no" disabled="disabled" style="width: 35px;" /></td>                   <td>                     <input type="text" name="code" style="width: 85px;" /></td>                   <td>                     <input type="text" name="name" /></td>                   <td>                     <input type="number" step="0.000001" name="longitude" onclick="selMapPoint(this,true)" /></td>                   <td>                     <input type="number" step="0.000001" name="latitude" /></td>                   <td>                     <input type="text" name="devisionName" />                     <input type="hidden" name="devisionCode" /></td>                   <td>                     <input type="text" name="cityName" disabled="disabled" />                     <input type="hidden" name="cityCode" /></td>                   <td>                     <input type="text" name="countyName" readonly onclick="selCounty(this)" />                     <input type="hidden" name="countyCode" />                     <input type="hidden" name="areaCode"></td>                   <td>                     <input type="number" step="0.00001" name="lastNodeDistance" />                     <input type="hidden" name="lastNodeCode" /></td>                   <td style="width: 115px; text-align:center">                     <button type="button" onclick="addRow(this,'tb_tollDetails');resetSort('tb_tollDetails');">+</button>                     <button type="button" onclick="delRow(this);resetSort('tb_tollDetails');">-</button>                     <button type="button" onclick="upDown(this,true);">↑</button>                     <button type="button" onclick='upDown(this,false);'>↓</button></td>                 </tr>               </tbody>             </table>           </div>         </div>    </form>

.data-content .top-right{    height:auto;    overflow-y:auto;}.top-right .p{    margin: 0 15px;    height:48px;    line-height:48px;    border-bottom: 1px solid #ccc;    font-size: 16px;    overflow:hidden;}.top-right .p strong{    float:left;    font-weight:normal;}.top-right .p .btn{    float:right;}.top-right .p .btn input{    margin-left:15px;    height: 30px;    line-height: 30px;    border:1px #53AAAD solid;}.top-right .p .btn input:disabled{    color:#595c5e;    border:1px #1a3a3b solid;    height:32px;    background-color:#000;}#form_main{    padding: 0 15px;}.div_control{    float: none;    padding-top: 24px;}.div_control div{    float: left;    width: 360px;    height: 35px;}.div_control span{    color:#53abaf;}.div_control label{    padding-right:6px;    width: 110px;    float:left;    text-align: right;    display: block; }#div_baseInfo label{    width:121px;}.div_control input[required]+label{    color: #ffba02;}.div_control input[required]+label:before {  content:'*';  margin-right:5px;}.div_control input:not([type="checkbox"]){    width: 160px;    height:24px;    line-height:24px;    border-radius:3px;}.div_control input[type="checkbox"]{    vertical-align:middle;}fieldset{    margin:25px 0px 25px 0px;    padding-bottom:10px;    border-radius:10px;    border:1px #7d7d7d solid;    position:relative;}legend{    width:92px;    height:18px;    position:absolute;    left:14px;    background:url(../../../images/title.png);    top:-10px;    padding-left:15px;    font-size:12px;    color:#fff;    cursor:pointer;}legend.title-on{    background:url(../../../images/title2.png);}#div_tollDetails table{    padding-top:15px;    width:100%;}#div_tollDetails table input{    width:100%;}#div_tollDetails{    margin-top:20px;    padding-top:10px;}#div_tollDetails .c-title{    text-align:center;    color:#fff;    font-size:14px;    background:url(../../../images/tableLine.png) no-repeat center center;    float:none;}#div_tollDetails td,#div_tollDetails input{    height:24px;    line-height:24px;}#div_tollDetails td{    background-color: fff;}#div_tollDetails button{    width:20px;    height:20px;    border:1px #b98300 solid;    border-radius:3px;    background-color:#ffb400;}#div_tollDetails th{    color:#fff;}

0 0