小贝子编程

如何删除flex布局中的空白



/* Master styles */
html, body {
font-family: "Lato", sans-serif;
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
overflow-x: hidden;
}
.boxcontent {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: 100vh;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: left;
align-items: left;
margin: 10px;
transition: 0.5s;
}
.box:hover {
height: 400px;
}
.box  .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.box .imgBx img {
max-width: 100%;
opacity: 0.1;
transition: 0.5s;
}
.box:hover .imgBx img{
opacity: 1;
}
.box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;

z-index: -1;
}
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -2;
filter: blur(40px);
background: #060C21;
}
.box:before,
.box::after 
{
background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}
.box:nth-child(2) before,
.box::nth-child(2) after 
{
background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}
.box:nth-child(3) before,
.box::nth-child(3) after 
{
background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}
.box .content {
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
bottom: 10px;
height: 90px;
background: rgba(red, green, blue, alpha);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
opacity: 0;
transition: 0.5s;

}
.box:hover .content
{
opacity: 1;
}
.box .content h2
{
font-size: 20px;
color: #fff;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
}
header {
background-color: crimson;
height: 66px;
}
header .logo {
float: left;
padding-top: 10px;
height: inherit;
font-weight: bolder;
margin-left: 2em;


}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header * {
color: white;
}
header .logo-text {
font-weight: bolder;
font-size: xx-large;
font-family: 'Candal', serif;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
font-family: 'Candal', serif;
}
header ul li a:hover {
background: rgb(116, 5, 27);
transition: 0.5s
}
/* Bottom footer syles */
.footer {
background: #303036;
color: #d3d3d3;
height: 400px;
position: absolute;

}
.footer .footer-bottom {
background: #343a40;
color: white;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;

}
.footer .footer-content {
height: 350px;
display:flex
}
.footer .footer-content .footer-section {
flex: 1;
padding: 25px;
}
.footer .footer-content .about h1 span {
color: crimson;
font-weight: bolder;
font-size: 1.3em;
}
.footer .footer-content h1,
.footer .footer-content h2 {
color: white;
}
.footer .footer-content .about .contact span {
display: block;
font-size: 1.1em;
font-weight: bolder;
margin-bottom: 8px;
}
.footer .footer-content .links ul a {
display: block;
margin-bottom: 10px;
font-size: 1.2em;
color: white;
}
.footer .footer-content .links ul a:hover{
color: white;
margin-left: 15px;
transition: all .3s;
}
.footer .footer-content .contact-form .contact-input {
background: #272727;
color: #bebdbd;
margin-bottom: 10px;
line-height: 1.5rem;
padding: .9rem 1.4rem;
border: none;
display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
background: #1a1a1a;
}
.btn-big {
padding: .7rem 1.3rem;
line-height: 1.3rem;
background-color: #006669;
border:none;
font-weight: bolder;
font-size: medium;
color: white;
}

@media only screen and (max-width: 934px) {
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
width: auto;
flex-direction: column;
}
}
@media only screen and (max-width: 750){
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
width: auto;
flex-direction: column;
}
}
}
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>Pagel</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">

<!-- Google font -->
<link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">
</head>

<body>
<header>
<div class="logo">
<div class="logo-text"><span>Pagel</span>Romania</div>
</div>
<ul class="nav">
<li><a href="#">Acasa</a></li>
<li><a href="#">Despre Noi</a></li>
<li><a href="#">Produse</a></li>
</ul>
</header>
<div class="boxcontent">
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
</div>


<!-- Bottom footer -->
<div class="footer">
<div class="footer-content">
<div class="footer-section about">
<h1 class="brand"><span>Pagel</span> Romania</h1>
<p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor 
la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>
<div class="contact">
<span>&#9742; &nbsp; 0762-837-458</span>
<br>
<span>&#9993; &nbsp; office@solmat.ro</span>
</div>
<div class="socials">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>

</div>
</div>
<div class="footer-section links">
<h2>Link-uri rapide</h2>
<br/>
<ul>
<a href="#">
<li>Conditii generale</li></a>
<a href="#">
<li>Politica de confidentialitate</li>
</a>
<a href="#">
<li>Linkuri</li>
</a>
<a href="#">
<li>Despre noi</li>
</a>
<a href="#">
<li>Notificari site</li>
</a>
<a href="#">
<li>Home</li>
</a>
</ul>
</div>
<div class="footer-section contact-form">
<h2>Contactati-ne</h2>
<br>
<form action="index.html" method="POST">
<input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">
<textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea> 
<button type="submit" class="btn btn-big">
<i class="fas fa-envelope">
</i>
Trimiteti
</button>
</form>
</div>

</div>
<div class="footer-bottom">
&copy; pagel.ro ┃ Design by Toma Dragos
</div>


</div>

</body>

</html>

我想删除我的标志下方最左边的.boxcontent中的空白。我该怎么做？这是我做网站的第一次尝试。

以及如何使我的.boxcontent对所有平台都有响应。对于页脚，我设法找到了@media的解决方案，但当我在.boxcontent上尝试同样的东西时，它在移动设备上看起来不太好。

谢谢！

clear: left;将无法正确解决您的问题。

您使用了flexbox，但某些flexbox属性是错误的。overflow在移动设备中产生问题。您必须从html,boy中删除overflow-x: hidden;，保留默认值。flex-wrap: 100vh;是错误的，应该是flex-wrap: wrap | nowrap;读取的柔性包装。左边的justify-content: left;是错误的，应该是justify-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly;其他值，如left right, start and end，有浏览器支持问题，读取正确的内容。与align-items读取对齐项目相同。我修复了响应css问题。此外，.boxcontent的宽度将为100%。

您已经阅读了flexbox。

这是经过修改的css

/* Master styles */
html, body {
font-family: "Lato", sans-serif;
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
}
.boxcontent {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.box {
position: relative;
flex-basis: calc(20% - 20px);
flex-grow: 0;
flex-shrink: 0;
max-width: calc(20% - 20px);
height: 300px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 10px;
transition: 0.5s;
}
@media (max-width: 767px){
.box{
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 575px){
.box{
flex-basis: calc(100% - 20px);
max-width: calc(100% - 20px);
}
}
.box:hover {
height: 400px;
}
.box  .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.box .imgBx img {
max-width: 100%;
opacity: 0.1;
transition: 0.5s;
}
.box:hover .imgBx img{
opacity: 1;
}
.box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
}
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -2;
filter: blur(40px);
background: #060C21;
}
.box:before,
.box::after 
{
background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}
.box:nth-child(2) before,
.box::nth-child(2) after 
{
background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}
.box:nth-child(3) before,
.box::nth-child(3) after 
{
background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}
.box .content {
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
bottom: 10px;
height: 90px;
background: rgba(red, green, blue, alpha);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
opacity: 0;
transition: 0.5s;
}
.box:hover .content
{
opacity: 1;
}
.box .content h2
{
font-size: 20px;
color: #fff;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
}
header {
background-color: crimson;
height: 66px;
}
header .logo {
float: left;
padding-top: 10px;
height: inherit;
font-weight: bolder;
margin-left: 2em;

}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header * {
color: white;
}
header .logo-text {
font-weight: bolder;
font-size: xx-large;
font-family: 'Candal', serif;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
font-family: 'Candal', serif;
}
header ul li a:hover {
background: rgb(116, 5, 27);
transition: 0.5s
}

/* Bottom footer syles */
.footer {
background: #303036;
color: #d3d3d3;
height: 400px;
position: absolute;
}
.footer .footer-bottom {
background: #343a40;
color: white;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer .footer-content {
height: 350px;
display:flex
}
.footer .footer-content .footer-section {
flex: 1;
padding: 25px;
}
.footer .footer-content .about h1 span {
color: crimson;
font-weight: bolder;
font-size: 1.3em;
}
.footer .footer-content h1,
.footer .footer-content h2 {
color: white;
}
.footer .footer-content .about .contact span {
display: block;
font-size: 1.1em;
font-weight: bolder;
margin-bottom: 8px;
}
.footer .footer-content .links ul a {
display: block;
margin-bottom: 10px;
font-size: 1.2em;
color: white;
}
.footer .footer-content .links ul a:hover{
color: white;
margin-left: 15px;
transition: all .3s;
}
.footer .footer-content .contact-form .contact-input {
background: #272727;
color: #bebdbd;
margin-bottom: 10px;
line-height: 1.5rem;
padding: .9rem 1.4rem;
border: none;
display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
background: #1a1a1a;
}
.btn-big {
padding: .7rem 1.3rem;
line-height: 1.3rem;
background-color: #006669;
border:none;
font-weight: bolder;
font-size: medium;
color: white;
}


@media only screen and (max-width: 934px) {
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
}
}
@media only screen and (max-width: 750){
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
}
}

代码段低于

/* Master styles */
html, body {
font-family: "Lato", sans-serif;
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
}
.boxcontent {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.box {
position: relative;
flex-basis: calc(20% - 20px);
flex-grow: 0;
flex-shrink: 0;
max-width: calc(20% - 20px);
height: 300px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 10px;
transition: 0.5s;
}
@media (max-width: 767px){
.box{
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 575px){
.box{
flex-basis: calc(100% - 20px);
max-width: calc(100% - 20px);
}
}
.box:hover {
height: 400px;
}
.box  .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.box .imgBx img {
max-width: 100%;
opacity: 0.1;
transition: 0.5s;
}
.box:hover .imgBx img{
opacity: 1;
}
.box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;

z-index: -1;
}
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -2;
filter: blur(40px);
background: #060C21;
}
.box:before,
.box::after 
{
background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}
.box:nth-child(2) before,
.box::nth-child(2) after 
{
background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}
.box:nth-child(3) before,
.box::nth-child(3) after 
{
background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}
.box .content {
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
bottom: 10px;
height: 90px;
background: rgba(red, green, blue, alpha);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
opacity: 0;
transition: 0.5s;

}
.box:hover .content
{
opacity: 1;
}
.box .content h2
{
font-size: 20px;
color: #fff;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
}
header {
background-color: crimson;
height: 66px;
}
header .logo {
float: left;
padding-top: 10px;
height: inherit;
font-weight: bolder;
margin-left: 2em;


}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header * {
color: white;
}
header .logo-text {
font-weight: bolder;
font-size: xx-large;
font-family: 'Candal', serif;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
font-family: 'Candal', serif;
}
header ul li a:hover {
background: rgb(116, 5, 27);
transition: 0.5s
}
/* Bottom footer syles */
.footer {
background: #303036;
color: #d3d3d3;
height: 400px;
position: absolute;

}
.footer .footer-bottom {
background: #343a40;
color: white;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;

}
.footer .footer-content {
height: 350px;
display:flex
}
.footer .footer-content .footer-section {
flex: 1;
padding: 25px;
}
.footer .footer-content .about h1 span {
color: crimson;
font-weight: bolder;
font-size: 1.3em;
}
.footer .footer-content h1,
.footer .footer-content h2 {
color: white;
}
.footer .footer-content .about .contact span {
display: block;
font-size: 1.1em;
font-weight: bolder;
margin-bottom: 8px;
}
.footer .footer-content .links ul a {
display: block;
margin-bottom: 10px;
font-size: 1.2em;
color: white;
}
.footer .footer-content .links ul a:hover{
color: white;
margin-left: 15px;
transition: all .3s;
}
.footer .footer-content .contact-form .contact-input {
background: #272727;
color: #bebdbd;
margin-bottom: 10px;
line-height: 1.5rem;
padding: .9rem 1.4rem;
border: none;
display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
background: #1a1a1a;
}
.btn-big {
padding: .7rem 1.3rem;
line-height: 1.3rem;
background-color: #006669;
border:none;
font-weight: bolder;
font-size: medium;
color: white;
}

@media only screen and (max-width: 934px) {
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
}
}
@media only screen and (max-width: 750){
.footer {
height: auto;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .contact-form {
padding-bottom: 90px;
}
.boxcontent {
height: auto;
}
}
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>Pagel</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<div class="logo-text"><span>Pagel</span>Romania</div>
</div>
<ul class="nav">
<li><a href="#">Acasa</a></li>
<li><a href="#">Despre Noi</a></li>
<li><a href="#">Produse</a></li>
</ul>
</header>
<div class="boxcontent">
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
</div>
<div class="content">
<h2>Mortar de subturnare</h2>
</div>
</div>
</div>
<!-- Bottom footer -->
<div class="footer">
<div class="footer-content">
<div class="footer-section about">
<h1 class="brand"><span>Pagel</span> Romania</h1>
<p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor 
la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>
<div class="contact">
<span>&#9742; &nbsp; 0762-837-458</span>
<br>
<span>&#9993; &nbsp; office@solmat.ro</span>
</div>
<div class="socials">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-section links">
<h2>Link-uri rapide</h2>
<br/>
<ul>

<a href="#">
<li>Conditii generale</li></a>
<a href="#">
<li>Politica de confidentialitate</li>
</a>
<a href="#">
<li>Linkuri</li>
</a>
<a href="#">
<li>Despre noi</li>
</a>
<a href="#">
<li>Notificari site</li>
</a>
<a href="#">
<li>Home</li>
</a>
</ul>
</div>
<div class="footer-section contact-form">
<h2>Contactati-ne</h2>
<br>
<form action="index.html" method="POST">
<input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">
<textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea> 
<button type="submit" class="btn btn-big">
<i class="fas fa-envelope">
</i>
Trimiteti
</button>
</form>
</div>
</div>
<div class="footer-bottom">
&copy; pagel.ro ┃ Design by Toma Dragos
</div>
</div>
</body>
<script>
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
</script>
</html>

放入

clear:left;

在css类.boxcontent.中

相关内容

最新更新


热门标签：

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