DIV + CSS 流式排版应用

最新推荐文章于 2022-05-20 17:12:50 发布

dancing_candy

最新推荐文章于 2022-05-20 17:12:50 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签：前端 css

本文链接：https://blog.csdn.net/qq_32671301/article/details/53019220

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用 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;
}