如何擺脫頁面右側的空白？
[英]How can I get rid of the white space on the right side of page?
問題描述
我剛剛完成了非營利組織的假期活動的目標網頁。 我在點點塗飾方面遇到了一些麻煩。
當前，頁面右側有多余的空白觸發瀏覽器中的水平滾動條。 我不確定為什么，我希望頁面寬度與元素一起調整為屏幕尺寸。
另外，我對要展示人物的四個圖像的樣式感到麻煩。 我希望圖像顯示在同一行上，並且當屏幕最小為1200像素時，它們之間沒有間隔，每個圖像為300 x 300像素。 否則，我希望它們在屏幕上居中堆疊（在移動設備上）。 它們正在堆疊，但顯示在左側。
我不是最精明的程序員，因為我不是Web開發人員。 我實際上是非營利組織的社交媒體專家。 我感謝您的幫助。
可以在這里訪問頁面：
5 個解決方案
解決方案1
0 2015-11-15 22:05:12
嘗試將所有內容放入具有以下CSS的Wrapper div中：
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
您也可以嘗試以下方法：
overflow-x: hidden;
解決方案2
0 2015-11-15 22:06:57
對於空白（和正在顯示的滾動條），為.row { margin: 0 !important; }添加CSS .row { margin: 0 !important; } .row { margin: 0 !important; } 。 您目前有-10px +10px ...我從來不明白為什么這是引導程序標准。
要使圖像居中，您要添加margin: 0 auto; 到圖片的父div.box 。
解決方案3
0 2015-11-15 22:12:20
將此樣式應用於CSS或styles.css，它看起來是優先級最高的樣式表。
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
更新
我忘記為您的圖像發布解決方案。 此代碼適用於包裹在圖像周圍的元素。 大多數人使用< div> ，但是我使用的是<figure>因為它在語義上是正確的。
在.frame之類的容器上使用max-content會使它像收縮包裝一樣工作。 您需要使用供應商前綴，這很麻煩，因為您會看到必須分別寫出3個高度和寬度。
您可能必須使用負頁邊距並將填充和邊框重置為0，以消除圖像之間的空間。
.frame { width: -moz-max-content; width: -webkit-max-content; width: max-content; height: -moz-max-content; height: -webkit-max-content; height: max-content; margin: 0 auto; max-width: 100%; height: auto; border: 0; } .frame img { padding: 0; margin: -2px; border: 0; display: inline-block; width: 24%; height: auto; }
<figure class="frame"> <img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" /> <img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" /> <img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" /> <img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" /> </figure>
解決方案4
0 已采納 2015-11-15 22:13:31
最好的辦法是將標簽中的所有內容包裝到新的div中，並設置overflow：hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
的CSS
.wrapper {
overflow: hidden;
}
另外：最好不要在body標簽內調用腳本/ css。 這些應該稱為內部標簽
解決方案5
0 2015-11-15 22:15:46
問題在於所有這些邊緣偽造：
@media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
在我關閉所有功能之后，一切似乎都正確地排列了起來。
調整窗口大小時，如何去除瀏覽器窗口右側的空白區域？
[英]How can I get rid of the white space on the right side of the browser window when the window is resized?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.