Css 使divs自动填充空间

所以我一直在努力解决我的部门的问题；如何将我的设计转化为实际的布局，我在研究或实现方面没有太多的运气。在附加的链接中，您看到//公文包，然后是一条延伸到内容区域边缘的线，其中有一条红线。现在，我将//公文包和红线div都设置为特定的像素宽度，但我希望能够让这两个div自动设置其宽度（第一个根据//标题所占的空间自动设置其宽度，第二个填充容器中的剩余空间）因为我会让网站的其他部分做同样的事情，不想专门针对每个区域进行测量。欢迎提出任何建议，非常感谢

---

首先，让我补充一下您的网站，它看起来既漂亮又时尚！ 其次，我为您提供了一个解决方案，使用

display:table

css属性，但是，它需要添加

元素，因为它不会让您拥有高度不均匀的单元格：

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

//投资组合

#圆柱{
宽度：400px；
显示：表格；
}
#头衔{
显示：表格单元格；
宽度：175px；
}
#线{
显示：表格单元格；
宽度：自动；
}
hr{
背景色：#C10000；
高度：1px；
边界：0；
}

请参阅完整示例：

请参阅：（更改浏览器窗口的宽度）

//投资组合
#圆柱{
字体系列：“ProximaNovaRegular”，日内瓦，无衬线；
字号：19px；
文本转换：大写；
颜色：#C10000；
边缘底部：20px；
字母间距：4pt；
}
#头衔{
浮动：左
}
#线{
溢出：隐藏；
高度：9px；
边框底部：1px实心#c10000；
}

Div（所有块元素）的宽度都将是可用空间的100%，但您的问题是它们是浮动的，要使两个元素并排浮动，它们需要设置宽度，并且这些宽度的总和不得超过父元素的宽度。您可以将这两个列都设置为50%，但是它们之间没有空间，但是如果添加一些填充，则会将宽度增加到50%以上，这样也不会起作用。我知道这不是一个答案，这是一个很难看到div如何替换表的问题。这是可行的，但它确实存在。我要抢夺你的JSFIDLE来展示另一种解决方案。非常感谢你的帮助！谢谢你的夸奖！我还没有机会对实际的设计提出太多的批评，所以听到它看起来不错真的很有帮助。这让我很开心。哦，

overflow:hidden

完成了任务。我当然喜欢这个+1！我完全应该想到使用溢出：隐藏！非常感谢你的帮助！这样我就不用再做很多额外的工作了。

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"></div>
</div>

#columnA {
    font-family: 'ProximaNovaRegular', Geneva, sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    color: #C10000;
    margin-bottom: 20px;
    letter-spacing: 4pt;
}
#title {
    float: left
}
#line {
    overflow: hidden;
    height: 9px;
    border-bottom: 1px solid #c10000;
}