小贝子编程

缩小时网页上有多余的空白



我正试图修复当我将网站缩小到768像素时，左侧似乎有太多空白，我无法确定它来自哪里以及如何修复，我试图删除默认的填充和边距，并更改图像的大小，但这似乎并没有解决问题。我将发布一些代码。如有任何帮助，我们将不胜感激。

{
margin: 0px;
padding: 0px;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
position: relative;
left: 30%;
color: #f8d501;
}
img {
width: 100px;
height: 100px;

border: solid 5px #f8d501;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
color: #f8d501;
}

div.item-1 {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
padding-top: 40px;
position: relative;
left: 30%;
color: yellow;
}
img {
max-width: 100%;
height: auto;

}
.caption-1 {
/* Make the caption a block so it occupies its own line. */
display: block;
color: #f8d501;
font-family: 'Verdana-bold';
}
h1 {
padding-top: 20px;
color: #fad700;
transform: rotate(-90deg);
font-size: 50px;
}

body {
background-color: #0d395e;
}
.logo-floatRight {
padding-left: 20px;
display: flex;
border: none;
max-width: 100%;
height: auto;
}
.logo-floatLeft {
padding-left: 20px;
display: inline-block;
border: none;
max-width: 100%;
height: auto;
padding: 10px;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 35%;
max-width: 600px;
height: auto;
}
.logoHeader{
color: #f8d501;
font-family: "Franklin Gothic Heavy regular"
padding: 10px;
max-width: 100%;
height: auto;
}
.text{
color: #f8d501;
text-align: center;
padding-right: 30px;
}

.logo-floatLefts{
border: none;
width: 100%;

height: auto;
}


@media only screen and (max-width: 768px) {
img {
width: 60%;

}
.logoHeader{
font-size: 15px;
}

.flex-container{
width: 120px;
height: 120px;

}
.caption {
font-size: 12px;
}
.item {
font-size: 15px;
}

}
}
<div class="main">
<div class="showcase-content">
<div class="flex-container">
<img src="https://via.placeholder.com/150" class="logo-floatLeft" alt="logo">
<h2 class="logoHeader">LATIN<br>AMERICAN<br>FILM<br>FESTIVAL IN<br>AUSTRALIA</h2>
<img src="https://via.placeholder.com/150" class="logo-floatRight" alt="logo"> 
</div>
<div class="item">
BRAZIL 
<img src="https://via.placeholder.com/150"/>
<span class="caption">LIFE IS A BITCH<br>Como e Cruel Viver Assim</span>
</div>
<div class="item">
CHILE
<img src="https://via.placeholder.com/150"/>
<span class="caption">BROKEN PANTIES<br>Colzones Ratos</span>
</div>
<div class="item">
COLOMBIA
<img src="https://via.placeholder.com/150"/>
<span class="caption">BAD LUCKY GOAT<br>El Dia De La Cabra</span>
</div>
<div class="item">
COSTA RICA
<img src="https://via.placeholder.com/150"/>
<span class="caption">THE GAZELLE'S DANCE<br>El Baile La Gacela </span>
</div>
<div class="item">
CUBA
<img src="https://via.placeholder.com/150"/>
<span class="caption">FALLEN GODS<br>Los Dioses Rotos</span>
</div>
<br> 
<div class="item-1">
ECUADOR
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">QUIJOTES NEGROS<br>Quijotes Negros</span>
</div>
<div class="item-1">
EL SALVADOR
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE PATH OF THE SHADOWS<br>El Camino De Las Sombras</span>
</div>
<div class="item-1">
GAUTEMALA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">WHERE ALL ROADS END<br>Donde Acaban Los Caminos.</span>
</div>
<div class="item-1">
MEXICO 
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">MARA'AKAME'S DREAM<br>El Sueno Del Mara'akame</span>
</div>
<div class="item-1">
PANAMA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">GRACE & SPLENDOUR<br>Donaire Y Esplendo</span>
</div>

<br>
<div class="item-1">
<h1> FREE<br>EVENT </h1>  

</div>

<div class="item-1">
PARAGUAY
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE HEIRESSES<br>Las Herederas</span>
</div>
<div class="item-1">
PERU
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">OLD FRIENDS<br>Viejos Amigos</span>
</div>
<div class="item-1">
URUGUAY
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE POPES TOILET<br>El Bano Del Papa.</span>

</div>
<div class="item-1">
ARGENTINA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">MAN FANCING SOUTHEAST<br>Hombre Mirando al Sudeste</span>
</div>

<div class="text">
<h3>FIND OUT WHEN FESTIVAL IS COMING TO YOUR CITY AT<br>WWW.FACEBOOK.COM/LAFFAUSSIE</h3>

<img src="footer.png" class="logo-floatLefts" alt="logo">
</div>
</div>
</div>

我刚刚从item，item-1，flex容器类中删除了额外的边距和填充，只添加了垂直对齐和文本对齐中心。左侧没有多余的边距或填充。所有内容都保留在中心。希望它能解决你的问题。我还从媒体查询中删除了img和flex容器类。

{
margin: 0px;
padding: 0px;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
position: relative;
color: #f8d501;
}
img {
width: 100px;
height: 100px;

border: solid 5px #f8d501;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
color: #f8d501;
}

div.item-1 {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
padding-top: 40px;
position: relative;
color: yellow;
}
img {
max-width: 100%;
height: auto;

}
.caption-1 {
/* Make the caption a block so it occupies its own line. */
display: block;
color: #f8d501;
font-family: 'Verdana-bold';
}
h1 {
padding-top: 20px;
color: #fad700;
transform: rotate(-90deg);
font-size: 50px;
}

body {
background-color: #0d395e;
}
.logo-floatRight {
border: none;
max-width: 100%;
height: auto;
padding: 10px;
}
.logo-floatLeft {
border: none;
max-width: 100%;
height: auto;
padding: 10px;
}
.center-text {
text-align: center;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}
.logoHeader{
color: #f8d501;
font-family: "Franklin Gothic Heavy regular"
padding: 10px;
max-width: 100%;
height: auto;
}
.text{
color: #f8d501;
text-align: center;
padding-right: 30px;
}

.logo-floatLefts{
border: none;
width: 100%;

height: auto;
}


@media only screen and (max-width: 768px) {

.logoHeader{
font-size: 15px;
}
.caption {
font-size: 12px;
}
.item {
font-size: 15px;
}

}
<div class="main">
<div class="showcase-content">
<div class="flex-container">
<img src="https://via.placeholder.com/150" class="logo-floatLeft" alt="logo">
<h2 class="logoHeader">LATIN<br>AMERICAN<br>FILM<br>FESTIVAL IN<br>AUSTRALIA</h2>
<img src="https://via.placeholder.com/150" class="logo-floatRight" alt="logo"> 
</div>
<div class="center-text">
<div class="item">
BRAZIL 
<img src="https://via.placeholder.com/150"/>
<span class="caption">LIFE IS A BITCH<br>Como e Cruel Viver Assim</span>
</div>
<div class="item">
CHILE
<img src="https://via.placeholder.com/150"/>
<span class="caption">BROKEN PANTIES<br>Colzones Ratos</span>
</div>
<div class="item">
COLOMBIA
<img src="https://via.placeholder.com/150"/>
<span class="caption">BAD LUCKY GOAT<br>El Dia De La Cabra</span>
</div>
<div class="item">
COSTA RICA
<img src="https://via.placeholder.com/150"/>
<span class="caption">THE GAZELLE'S DANCE<br>El Baile La Gacela </span>
</div>
<div class="item">
CUBA
<img src="https://via.placeholder.com/150"/>
<span class="caption">FALLEN GODS<br>Los Dioses Rotos</span>
</div>
</div>
<br> 
<div class="center-text">
<div class="item-1">
ECUADOR
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">QUIJOTES NEGROS<br>Quijotes Negros</span>
</div>
<div class="item-1">
EL SALVADOR
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE PATH OF THE SHADOWS<br>El Camino De Las Sombras</span>
</div>
<div class="item-1">
GAUTEMALA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">WHERE ALL ROADS END<br>Donde Acaban Los Caminos.</span>
</div>
<div class="item-1">
MEXICO 
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">MARA'AKAME'S DREAM<br>El Sueno Del Mara'akame</span>
</div>
<div class="item-1">
PANAMA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">GRACE & SPLENDOUR<br>Donaire Y Esplendo</span>
</div>
</div>
<br>
<div class="center-text">
<div class="item-1">
<h1> FREE<br>EVENT </h1>  

</div>

<div class="item-1">
PARAGUAY
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE HEIRESSES<br>Las Herederas</span>
</div>
<div class="item-1">
PERU
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">OLD FRIENDS<br>Viejos Amigos</span>
</div>
<div class="item-1">
URUGUAY
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">THE POPES TOILET<br>El Bano Del Papa.</span>

</div>
<div class="item-1">
ARGENTINA
<img src="https://via.placeholder.com/150"/>
<span class="caption-1">MAN FANCING SOUTHEAST<br>Hombre Mirando al Sudeste</span>
</div>
</div>
<div class="text">
<h3>FIND OUT WHEN FESTIVAL IS COMING TO YOUR CITY AT<br>WWW.FACEBOOK.COM/LAFFAUSSIE</h3>

<img src="footer.png" class="logo-floatLefts" alt="logo">
</div>
</div>
</div>

开头的padding:0和margin:0用于body，我想您已经忘记写了。如果这还不能解决问题，请通过注释检查每个部分，看看哪个部分的宽度更大，以留出空白。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium