CSS填充父宽度

我很努力将div宽度设置为容器div的剩余宽度。在下面的例子中，我想要红色的div（一个input）尽可能多地占用空间。如果您在input中输入任何内容，则会显示绿色的div，该绿色div应始终右对齐。CSS填充父宽度

~~我不想使用flex或display: table-*或变通方法如设置overflow: hidden为浮动空间。~~

编辑：我正在寻找任何解决方案，为IE10 +工程（包括display: table-*等）

例子：https://codesandbox.io/s/23xo3wjjrp（更改template和style标签内/components/SearchBox.vue更改）

该示例使用vue，但为了完整起见，我也在此处发布代码：

HTML

<div class="ms-Fabric ms-SearchBox" :class="searchBoxStyle"> 

    <div class="ms-SearchBox-iconContainer"> 
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i> 
    </div> 
    <input class="ms-SearchBox-field" type="text" placeholder="Search"  
     v-model="searchQuery" ref="input" 
     @blur="onBlur" @focus="onFocus"> 
    <div class="ms-SearchBox-clearButton" v-show="searchQuery.length > 0" 
     @click="clear"> 
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Clear"></i> 
    </div> 
</div>

SCSS

// Active styles 
.ms-SearchBox.is-active { 
    .ms-SearchBox-iconContainer { 
    width: 4px; 
    transition: width .167s; 
    .ms-SearchBox-icon { 
     opacity: 0; 
    } 
    } 
} 

// Static styles 
.ms-SearchBox { 
    display: inline-block; 
    font-size: 0px; 
    font-weight: 400; 
    color: #333; 
    border: 1px solid #a6a6a6; 
    height: 32px; 
    padding-left: 8px; 
    width: 208px; 

    .ms-SearchBox-iconContainer { 
    font-size: 14px; 
    color: #106ebe; 
    transition: width .167s; 
    .ms-SearchBox-icon { 
     opacity: 1; 
     transition: opacity .167s 0s; 
    } 
    background: rgba(0, 0, 0, 0.2); 
    } 

    .ms-SearchBox-field { 
    display: inline-block; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    border: none; 
    outline: 1px solid transparent; 
    height: 32px; 
    vertical-align: top; 
    background: rgba(255, 0, 0, 0.2); 
    } 


    .ms-SearchBox-iconContainer, 
    .ms-SearchBox-clearButton { 
    display: inline-block; 
    height: 32px; 
    line-height: 32px; 
    width: 32px; 
    text-align: center; 
    } 

    .ms-SearchBox-clearButton { 
    font-size: 14px; 
    background: rgba(0, 255, 0, 0.2); 

    &:hover { 
     cursor: pointer; 
    } 
    } 
}

来源

2017-10-04 Johannes

添加代码*在这里*。所以当SO的未来用户来到这个问题时，他们可以看到你所指的代码，因为你的沙箱不会永远活着。 – ProEvilz

为什么不使用flex？你不想使用flex，或浮动，或表或任何可以让你做你想做的事情。 – Joe

我想支持IE9 +，这就是为什么。我想我会使用'width：calc（100％ - ...）'来填充容器。 – Johannes

-1

你应该尝试设置width:100%您input，并设置position:absolute到你的图标容器。通过填充输入，这应该做的事情。

希望我明白了这个问题:)

来源

2017-10-04 10:19:02

CSS填充父宽度

回答

相关问题