让表格填充宽度的其余部分

我的代码：https://jsfiddle.net/sf4g3v9n/让表格填充宽度的其余部分

我希望输入填充剩余空间。我已经搜索了很多网站，但找不到合适的答案。

重要提示：右侧的文本是动态的，因此没有绝对宽度。

我的HTML结构：

<div class="container"> 
    <form> 
    <div class="input-box"> 
     <input type="text" placeholder="search..." /> 
    </div> 
    </form> 
    <div class="selector"> 
    <p> 
     dynamic content 
    </p> 
    </div> 
</div>

来源

2016-09-26 Maarten Wolfsen

您可以使用flexbox这样做：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 700px; 
 
    display: flex; 
 
} 
 

 
form { 
 
    float: left; 
 
    flex: 1; 
 
} 
 

 
form .input-box{ 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    width: 100%; 
 
} 
 

 
.selector { 
 
    float: right; 
 
} 
 

 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}

<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     dynamic content 
 
    </p> 
 
    </div> 
 
</div>

因为要输入填补剩余的空间，一个flexbox是一个很自然的选择，因为这就是它的确切原因！

因此，这里有我做你的代码的更改：

首先，我做这 - 这使得form和input-box留在同一行了你的container一个Flexbox的。
```
.container { 
    width: 700px; 
    display: flex; 
} 
```
新增flex: 1您form让它延伸到剩余的空间。
Flexbox“弯曲”适用于您给它的容器的直接子代display: flex。所以你必须声明你的内部div input-box也是一个弹性容器。
现在将input框的宽度设置为100％，然后您就可以开始了！

干杯！

来源

2016-09-26 12:22:05 kukkuz

谢谢！很想看到你的解释。工作完美顺便！ –

@MaartenWolfsen补充说明..谢谢！ – kukkuz

Flexbox，就可以做到这一点：

注释解释方法

Guide to Flexbox

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    /* create flex-container */ 
 
    margin-bottom: 1em; 
 
} 
 
form { 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.input-box { 
 
    display: flex; 
 
    /* new inner flex-container */ 
 
} 
 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}

<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem 
 
    </p> 
 
    </div> 
 
</div>

来源

2016-09-26 12:24:41

让表格填充宽度的其余部分

回答

相关问题