解决左边固定右边自适应宽度的方案

| 阅读数:--次| 作者:html5,css3
摘要：上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题，当然，这个问题我也在百度中搜索过，基本搜索出来的答案都是这样描述的，我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局，是会损耗...

      上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题，当然，这个问题我也在百度中搜索过，基本搜索出来的答案都是这样描述的，我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局，是会损耗性能的，但是百度中却没有给出我所想表达出的解决方案，所以不得不在此将该方案具体的描述清楚。

      首先，我需要介绍的是display:box这个属性，它是今天弹性布局的主角，虽然它有个更加强大的弟弟display:flex，但是由于手机浏览器的兼容性问题，现在任然不太提倡使用这个属性，当然，如果你的项目只运行环境在高版本浏览器中，用flex会更加理想，有时间的博友可以好好关注这个属性。

      言归正传，display:box俗称弹性盒模型，早在2011年的时候其实就在移动端保持着良好的兼容性了，它有如下几个特性：      

      box-orient（用于设置盒模型内部元素的排列方式）

  1. inline-axis：从左向右排列（默认值）
  2. horizontal：水平排列
  3. vertical：垂直排列
  4. block-axis：从上向下排列

      box-pack （用于设置子容器在水平框中的水平位置，以及垂直框中的垂直位置）

  1. start ：所有子容器都分布在父容器的左侧，右侧留空
  2. end ：所有子容器都分布在父容器的右侧，左侧留空
  3. justify ：所有子容器平均分布（默认值）
  4. center ：平均分配父容器剩余的空间（全局居中的效果）

      box-align （用于规定如何对齐框的子元素）

  1. start ：子容器从父容器顶部开始排列
  2. end ：子容器从父容器底部开始排列
  3. center ：子容器横向居中
  4. baseline ：所有子容器沿同一基线排列
  5. stretch ：所有子容器和父容器保持同一高度（默认值）

     box-flex（指定box的子元素是否灵活或固定的大小，使用数字进行比例分配）

     介绍完box属性后我们开始在项目中实践：

     首先介绍几个坑：

     1、可参与box-flex比例分配的元素必须为display:block。

     2、内联元素会占用box内空间但是不参与剩余空间分配。

好了，我们开始设计一个简单的html结构表单：

     

1 <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>demo</title>
    </head>
    <body>
        <div class="view">
            <div class="main">
                <form class="formMain" action="" method="post">
                    <ul>
                        <li>
                            <label for="vender">商家:</label>
                            <input type="text" name="vender">
                        </li>
                        <li>
                            <label for="name">姓名:</label>
                            <input type="text" name="name">
                        </li>
                        <li>
                            <label for="number">手机:</label>
                            <input type="text" name="number">
                        </li>
                        <li>
                            <button class="submit" type="submit">提交</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </body>
</html>

 

随后进行css样式设计：

1 html,body{
        margin:0 auto;
        width:100%;
        height:100%;
        background-color:rgb(40,48,54);
        color:white;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-user-select: none;
        }
        div{
        margin:0 auto;
        }
        p{
        margin:0;
        padding:0;
        }
        .view{
        height:100%;
        /* Safari, Opera, and Chrome */
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        
        /* W3C */
        display:box;
        box-orient:vertical;
        box-pack:center;
        box-align:center;
        }
        .formMain{
        height:100%;
        }
        .main{
        width:100%;
        height:70%;
        }
        .main ul {
        width:100%;
        height:100%;
        list-style-type:none;
        list-style-position:outside;
        margin:0px;
        padding:0px;
        }
        .main li{
        height:4rem;
        margin: .8rem;
        padding:0;
        position:relative;
        /* Safari, Opera, and Chrome */
        display:-webkit-box;
        -webkit-box-orient:horizontal;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        
        /* W3C */
        display:box;
        box-orient:horizontal;
        box-pack:center;
        box-align:center;
        }
        .main label {
        margin:0;
        padding:3px;
        display:inline-block;
        font-size:1.8rem;
        }
        .main input[type="text"] {
        margin: 0 5px;
        padding:0;
        display: block;
        -webkit-box-flex: 1.0;
        box-flex: 1.0;
        background-color: #1F272D;
        font-size:1.8rem;
        height: 3.4rem;
        border-style: solid;
        border-width: 0 1px 1px;
        border-color: rgba(196, 196, 196, 0.18);
        box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset;
        border-radius: .3em;
        box-sizing: border-box;
        color:#fff;
        }
        .main input:focus{
        background: #fff;
        border-color:#28921f;
        color:#000;
        }
        .main button{
        margin:0 5px;
        padding:0;
        border-style: solid;
        border-width: 0 1px 1px;
        border-color: #5cd053;
        border-radius:.3em;
        height: 3.4rem;
        display:block;
        -webkit-box-flex:1.0;
        box-flex:1.0;
        font-size:1.8rem;
        background-color: rgba(90, 180, 105, 0.88);;
        color:#fff;
        }
        .main button.submit:active {
        border: 1px solid #20911e;
        -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
        box-shadow: 0 0 10px 5px #356b0b inset;
        }

为了在移动端中表现的极致，我们还需要增加一些响应式的样式以及一些默认样式的处理，加工后的完整代码如下：

1 <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>demo</title>
        <style> html {font-size:10px}        
        @media screen and (min-width:480px) and (max-width:639px) {
        html {
        font-size: 15px
        }
        }
        @media screen and (min-width:640px) and (max-width:719px) {
        html {
        font-size: 20px
        }
        }
        @media screen and (min-width:720px) and (max-width:749px) {
        html {
        font-size: 22.5px
        }
        }
        @media screen and (min-width:750px) and (max-width:799px) {
        html {
        font-size: 23.5px
        }
        }
        @media screen and (min-width:800px) and (max-width:959px) {
        html {
        font-size: 25px
        }
        }
        @media screen and (min-width:960px) and (max-width:1079px) {
        html {
        font-size: 30px
        }
        }
        @media screen and (min-width:1080px) {
        html {
        font-size: 32px
        }
        }
        *{-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;}
        *:focus {outline: none;}
        input{ outline:none;}
        html,body{
        margin:0 auto;
        width:100%;
        height:100%;
        background-color:rgb(40,48,54);
        color:white;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-user-select: none;
        }
        div{
        margin:0 auto;
        }
        p{
        margin:0;
        padding:0;
        }
        .view{
        height:100%;
        /* Safari, Opera, and Chrome */
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        
        /* W3C */
        display:box;
        box-orient:vertical;
        box-pack:center;
        box-align:center;
        }
        .formMain{
        height:100%;
        }
        .main{
        width:100%;
        height:70%;
        }
        .main ul {
        width:100%;
        height:100%;
        list-style-type:none;
        list-style-position:outside;
        margin:0px;
        padding:0px;
        }
        .main li{
        height:4rem;
        margin: .8rem;
        padding:0;
        position:relative;
        /* Safari, Opera, and Chrome */
        display:-webkit-box;
        -webkit-box-orient:horizontal;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        
        /* W3C */
        display:box;
        box-orient:horizontal;
        box-pack:center;
        box-align:center;
        }
        .main label {
        margin:0;
        padding:3px;
        display:inline-block;
        font-size:1.8rem;
        }
        .main input[type="text"] {
        margin: 0 5px;
        padding:0;
        display: block;
        -webkit-box-flex: 1.0;
        box-flex: 1.0;
        background-color: #1F272D;
        font-size:1.8rem;
        height: 3.4rem;
        border-style: solid;
        border-width: 0 1px 1px;
        border-color: rgba(196, 196, 196, 0.18);
        box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset;
        border-radius: .3em;
        box-sizing: border-box;
        color:#fff;
        }
        .main input:focus{
        background: #fff;
        border-color:#28921f;
        color:#000;
        }
        .main button{
        margin:0 5px;
        padding:0;
        border-style: solid;
        border-width: 0 1px 1px;
        border-color: #5cd053;
        border-radius:.3em;
        height: 3.4rem;
        display:block;
        -webkit-box-flex:1.0;
        box-flex:1.0;
        font-size:1.8rem;
        background-color: rgba(90, 180, 105, 0.88);;
        color:#fff;
        }
        .main button.submit:active {
        border: 1px solid #20911e;
        -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
        box-shadow: 0 0 10px 5px #356b0b inset;
        }
        </style>
    </head>
    <body>
        <div class="view">
            <div class="main">
                <form class="formMain" action="" method="post">
                    <ul>
                        <li>
                            <label for="vender">商家:</label>
                            <input type="text" name="vender">
                        </li>
                        <li>
                            <label for="name">姓名:</label>
                            <input type="text" name="name">
                        </li>
                        <li>
                            <label for="number">手机:</label>
                            <input type="text" name="number">
                        </li>
                        <li>
                            <button class="submit" type="submit">提交</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </body>
</html>

到此为止，一个可随浏览器宽度自由伸缩的弹性布局的简单表单就设计完成，大家可以在浏览器中查看，右边的输入框是自适应宽度的，既不需要脱离文档流，又可以自适应任何分辨率的手机屏幕。

当我写完这篇文章后，我要特别声明一下，该弹性布局的技术早在几年前就已经很好的实现了，园子中一定存在不少相关文章，所以我并不想作为一个多么牛的技术来发表，只是确实弹性布局很多web前端工程师没有很好的利用，对于该技术，大多数文章的标题是以弹性盒模型来设关键字的，所以针对例如解决左边固定右边自适应宽度的方案查找，很多同学在百度中确实很难查到弹性盒模型解决方案。

最后，祝愿大家都能学习与分享更多宝贵的前端知识，我们一起努力！

 

返回顶部

Copyright © 2014 网址:www.webkfa.com

学到老代码浏览 关闭浏览