Question

假设我有一个具有动态宽度的容器。在里面，我有两个输入并排;一个最小宽度为60px，另一个最小宽度为100px。如果容器小于160px，我希望输入堆叠在一起。纯css有可能吗？

    <div class="u-centerY u-fillRemaining">
       <div class="table-twoInputs">
           <input type="text" class="table-effort" placeholder="Effort" value="">
           <input type="text" id="row-1-position" value="$2">
       </div>
    </div>


.table-twoInputs {
    display: flex;
    flex: 1;

    input {
        color: black;
        transition: none;

        &:first-of-type {
            text-align: left;
            left: 0;


            &::-webkit-input-placeholder {
                font-size: 10px;
                color: $table-gray;
            }

    // Browser quirk. These need to be separated out 
            &::-moz-placeholder {
                text-transform: uppercase;
                font-size: 11px;
                color: $table-gray;
            }

            ::-ms-placeholder {
                text-transform: uppercase;
                font-size: 11px;
                color: $table-gray;
            }
        }

        & + input {
            margin-left: 0.5rem;
            width: 150%;
        } 
    }
}
    .u-centerY {
       display: flex;
       align-items: center; 
    }

.u-fillRemaining {
    flex: 1;
}

Answer 1

＆＃13;

.table-twoInputs {
  display: flex;
  flex-wrap: wrap;
}

.one {
  width: 100px;
}

.two {
  width: 60px;
}

＆＃13;

<div class="u-centerY u-fillRemaining">
  <div class="table-twoInputs">
    <input type="text" class="one" value="one">
    <input type="text" class="two" value="two">
  </div>
</div>

＆＃13;

https://jsfiddle.net/4u7pab8x/4/

当使用Flexbox在容器中没有足够的空间时，我可以将两个html输入分成自己的行吗？

1 个答案: