Question

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

Example

Answer 1

请参阅： http://jsfiddle.net/GmtMK/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;
}

Answer 2

首先，让我在你的网站上补充你，它看起来很漂亮和时尚！其次，我有一个解决方案，使用display: table css属性，但是，它需要添加一个<hr />元素，因为它不会让你有高度不均匀的单元格：

<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;
}

请参阅完整示例：http://jsfiddle.net/GmtMK/

使divs自动填充空间

2 个答案: