让div自动填充空间

发布于 2024-11-18 15:24:37 字数 341 浏览 3 评论 0原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤独陪着我 2024-11-25 15:24:37

参见： http://jsfiddle.net/GmtMK/1/ < em>（改变浏览器窗口的宽度）

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

See: http://jsfiddle.net/GmtMK/1/ (change the width of the browser window)

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

回复收藏 0 原文

满地尘埃落定 2024-11-25 15:24:37

首先，让我在你的网站上补充一下你的网站，它看起来又漂亮又时尚！
其次，我为您提供了一个解决方案，使用 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;
}

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

First, let me complement you on your website, it looks nice and stylish!
Secondly, I have a solution for you, using display: table css property, however, it requires adding an <hr /> element is it won't let you have cells of uneven height:

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

Please see full example: http://jsfiddle.net/GmtMK/

回复收藏 0 原文

~没有更多了~