使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自動填充空間

回答

相關問題