避免底部滾動條

我在表格中有3張圖片，這是我能弄清楚如何讓它們彼此相鄰的唯一方法。我遇到的問題是，在我使用的屏幕上，他們看起來像我希望他們在底部沒有滾動條，但在其他大小的屏幕上，他們強制整個頁面進行擴展，因此需要滾動才能看到整個頁面的寬度。我怎樣才能使外觀響應，使圖像保持相對於其他所有的相同大小？避免底部滾動條

截圖附

來源

2017-10-13 Cameron Hickey

這可以幫助你：https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of -different-height-and-width-the-same-via-css –

你可以設置圖像大小的百分比，而不是像素。 – tipsfedora

有一對夫婦的好辦法，使這樣的響應屏幕大小的網頁。我將描述他們兩個，但同樣，還有更多：

製作表格的寬度的頁面寬度
外部樣式庫，匹配諸如引導

製作的表寬度匹配頁面寬度

首先，您需要確保頁面本身具有樣式位置：相對位置 - 以便它的任何子項（包括您的表格）可以相對於它定位或調整大小。有一些方法可以用css來做到這一點，但是如果您使用的是類，則可以將html中的所有標準高級元素分配到相對位置，並且是瀏覽器提供的全角。

html, body { 
    position: relative; 
    width: 100%; 
    min-width: 100%; //we do both width and min-width for compatability with old browsers 
}

既然這樣，你就有了動態寬度的起點。如果表格是<body>元素的直接子元素，那麼您應該爲它定義一個類，它也會給它一個100％的寬度。請記住，此寬度映射到其父項的寬度，因此由於<body>是整頁寬度，所以表格也會試圖做到！如果你想添加周圍的一些空間（所以它不從字面上命中頁面邊緣，你可以添加一些填充呢！

.fullWidthTable { 
    position: relative; 
    width: 100%; 
    min-width: 100%; 
    padding-left: 20px; 
    padding-right: 20px; 
}

現在，你可以把你的班表元素，它應該映射到頁面大小！請記住，如果你的圖片不按他們的父母<td>的大小，調整大小，那麼他們可能會重疊或者有其他不希望的行爲。

使用引導

所以，如果你有興趣使用現有的框架來組織你的HTML e在網頁上留言，我強烈推薦Bootstrap。 Bootstrap爲您提供了許多預定義的類，這些類具有可用於製作動態網站的一致且可預測的結構。在一般情況下，引導結構包括三個主要類別：

容器
行
列

這其實很類似於一個HTML表工作 - 但它通過採用動態調整大小考慮設計。

你可以找到完整的文檔和例子在這裏使用引導：Bootstrap Docs

來源

2017-10-13 23:50:17

避免底部滾動條

回答

相關問題