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填充父寬度

回答

相關問題