使div自动填充空间

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

Example

来源

2011-07-04 Justin

div的（一无论如何，它们的宽度都是可用空间的100％，但你的问题在于它们是浮动的，并且有两个元素并排浮动，它们需要设置宽度并且这些元素的总数不得超过父元素的宽度。你可以将这两列都设置为50％，但是它们之间没有空间，但是如果你添加了一些填充，你会将宽度增加到50％以上，以至于无法使用。不是我知道的答案，这是很难看到div如何替换表格的问题之一。 – Treborbob

参见：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; 
}

来源

2011-07-04 14:30:12 thirtydot

哦，'overflow：hidden'然后完成这项工作。我喜欢+1 – Tsar

当然！我完全应该考虑使用overflow：隐藏！非常感谢你的帮助！这让我从一开始就完成了大量额外的工作。 – Justin

首先，请允许我补充您的网站上，它看起来既美观又时尚！其次，我对你的解决方案，使用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/

来源

2011-07-04 13:53:15 Tsar

这可行，但它[在IE7中无法使用]（http://caniuse.com/css-table）。我要抢劫你的jsFiddle来展示另一种解决方案。 – thirtydot

非常感谢您的帮助！并感谢您的赞美！我还没有机会在实际设计上得到很多批评，所以听到它看起来很体面真的很有帮助。它使我的一天。 – Justin

使div自动填充空间

回答

相关问题