CSS處理溢出的div

我有2個div的問題。CSS處理溢出的div

它是一個100％寬度有2個div的盒子。左邊是縮略圖。正確的是描述。

我的問題是，當您調整瀏覽器窗口的大小時，數據描述會在縮略圖下方顯示。我添加了最小寬度但沒有結果。也許我把它加在錯誤的地方。

非常感謝。

http://jsfiddle.net/NzX9e/

來源

2012-07-19 JorgeeFG

您是否可以將您的示例簡化爲證明問題所需的最低限度標記？你有這麼多元素，我不確定你遇到了哪些問題。 – KatieK 2012-07-19 20:36:04

對不起，這裏是：http://jsfiddle.net/NzX9e/6/ – JorgeeFG 2012-07-19 20:38:29

如果希望事物在縮放窗口時正常工作，請勿將％值與固定寬度混合。一個div自然會獲得父母給它的所有空間。所以你真正需要做的是去掉很多不必要的樣式和標記。

對於這個特定的情況下：http://jsfiddle.net/NzX9e/7/

基本上，你浮在div包含IMG和刪除它旁邊的一個所有其他樣式（我加了一些填充它，給它一點未來的喘息空間到圖像）。

.docBox { 
    border: solid 1px #006633; 
    margin: 10px 0px 0px 10px; 
    overflow: hidden; <- this acts like a clear to keep the floated div in the parent 
} 

.previewImgBox { 
    height: 70px; 
    width: 50px; 
    text-align: center; 
    float: left; 
} 

.previewData { 
    padding: 0 0 0 60px; 
    'all the styles you had here are not needed and cause your problem' 
}

我是不是去通過，並清理所有的標記和樣式，只是調用它的是，你有很多超過需要。可能比你想要完成的事情多一倍。少即是多。 :)

來源

2012-07-19 20:45:26 Waterboy

謝謝，爲什麼你更喜歡浮動圖像而不是2個內聯div？我在這方面是新手，這是我不明白的，必須有一個原因。在預覽數據我有溢出：自動，因爲我不想固定的高度，並把關鍵字的滾動條，如果有溢出。在你的小提琴它不工作，如果我添加它...是因爲父母有溢出：隱藏？ – JorgeeFG 2012-07-19 20:51:34

不確定爲什麼你想要一個固定的高度，在每個文本塊上出現滾動條會很煩人。如果你喜歡，你可以添加它。內聯意味着元素大小的內容，你真正想要的是一個盒子佈局（在我的經驗中最常見）。你會發現用css和html你幾乎可以隨心所欲地獲得東西，但正確的方式將始終導致最乾淨的解決方案和最少量的代碼。我在這裏寫了一個迴應，試圖描述推理，但這個領域還不夠大。簡而言之，發揮元素自然行爲的長處。 – Waterboy 2012-07-19 21:27:19

嗯，我只是95％的寬度修改爲94％，它的工作就像一個魅力。我希望問題能夠保持開放以查看是否有更好的解決方案。

來源

2012-07-19 20:36:16 JorgeeFG

的jsfiddle：http://jsfiddle.net/NzX9e/11/

變化包括：

取出的margin-top：

.previewImgBox .thumb { 
    /*margin-top: 5px;*/ 
}

添加高度：

.docBox { 
    height: 70px; 
    border: solid 1px #006633; 
    margin: 10px 0px 0px 10px; 
}

添加浮動：左：

.previewData { 
    height: 70px; 
    min-width: 95%; 
    width: 95%; 
    /*border: solid 1px #00CC33;*/ 
    overflow: auto; 
    display: inline-block; 
    float:left; 
} 

.previewImgBox { 
    height: 70px; 
    width: 50px; 
    /*border: solid 1px #00CC33;*/ 
    text-align: center; 
    display: inline-block; 
    float:left; 
}

來源

2012-07-19 20:37:11

嗯，它比我的第一個例子更破碎：P它正在外面的容器分區。 – JorgeeFG 2012-07-19 20:41:39

傻，即。再試一次。 – 2012-07-19 20:47:28

謝謝，這是工作。我會問你同樣的問題，我做了另一個答覆：爲什麼你喜歡浮動圖像，而不是2個內聯div？好奇心比其他東西更多。 – JorgeeFG 2012-07-19 20:55:31

CSS處理溢出的div

回答

相關問題