我无法连续填充两个弹性项目之间的水平间隙

我正在设计一个网页，我试图在flex中堆叠一个剪贴画图像和描述。这两者之间存在差距，即使添加了正当内容也不会消失。我用颜色来更好地形象地呈现这个情况。

故障部件

body {
background-color: rgb(220, 220, 220);
}
nav {
display: inline;
text-align: right;
}
nav > * {
margin: 0px 20px 0px 0px;
font-family: serif;
text-decoration: none;
color: black;
}
img {
width: 25%;
height: auto;
display: inline;
text-align: left;
margin: 0px 600px 0px 0px;
}
header {
display: block;

margin: 0px 0px 0px 0px;
width: 100%;
}
div {
display: block;
width: 70%;
margin: 0px 200px 0px 200px;
text-align: center;
}
#email {
background-color: white;
border: black solid;
width: 300px;
height: 25px;
margin: 0px 0px 10px 0px;
}
#submit {
width: 200px;
height: 25px;
display: block;
margin: auto;
border: solid black;
background-color: yellow;
}
#features {
display: block;
}
#clip {
width: 100px;
height: 100px;
}
section {
display: flex;
flex-direction: row;
margin: 50px 100px 50px 100px;
background-color: yellow;
}
article {
display: flex;
flex-direction: column;
background-color: pink;

}
article > * {
margin: 0px 0px 0px 0px;
}

<body>
<header>
<img src="https://cdn.freecodecamp.org/testable-projects- fcc/images/product-landing-page-logo.png" alt="original trombones">
<nav>
<a href="">Features</a>
<a href="">How it works</a>
<a href="">Pricing</a>
</nav>
</header>
<div>
<h1 style="text-align: center;">Hand-crafted, home-made masterpieces</h1>
<form id="form">
<label for="email"></label>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit" form="form" target="_blank"id="submit"><strong>Let's get started!</strong></button></form>
</div>
<div2 id="features">
<section>
<img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
<article>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</article>
</section>
<section>
<img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
<article>
<h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</article>
</section>
<section>
<img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
<article>
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</article>
</section>
</div2>

</body>

是完整的代码。我正试图让"#features"元素中的"section"项靠近在一起。

我能理解的是，您想在删除空白后在一行中显示您的内容。以下是满足您需求的解决方案。我只更改了CSS。还更新了HTML文档结构，包括head标签和title标签，并在头部标签内包含样式，这是编写HTML页面的正确方式。完整代码如下:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-color: rgb(220, 220, 220);
}
nav {
display: inline;
text-align: right;
}
nav > * {
margin: 0px 20px 0px 0px;
font-family: serif;
text-decoration: none;
color: black;
}
img {
width: 25%;
height: auto;
display: inline;
text-align: left;
/*margin: 0px 600px 0px 0px;*/
}
header img {
/*        width: 25%;
height: auto;
display: inline;
text-align: left;*/
margin: 0px 600px 0px 0px;
}
header {
display: block;
margin: 0px 0px 0px 0px;
width: 100%;
}
div {
display: block;
width: 70%;
margin: 0px 200px 0px 200px;
text-align: center;
}
#email {
background-color: white;
border: black solid;
width: 300px;
height: 25px;
margin: 0px 0px 10px 0px;
}
#submit {
width: 200px;
height: 25px;
display: block;
margin: auto;
border: solid black;
background-color: yellow;
margin-bottom: 50px;
}
#features {
display: flex;
}
#clip {
width: 100px;
height: 100px;
}
section {
display: flex;
flex-direction: row;
/* margin: 50px 100px 50px 100px; */
background-color: yellow;
/* margin: 0px 100px;*/
}
article {
display: flex;
flex-direction: column;
background-color: pink;
}
article > * {
margin: 0px 0px 0px 0px;
}
</style>
<title>Test</title>
</head>
<body>
<header>
<img src="https://cdn.freecodecamp.org/testable-projects- fcc/images/product-landing-page-logo.png" alt="original trombones">
<nav>
<a href="">Features</a>
<a href="">How it works</a>
<a href="">Pricing</a>
</nav>
</header>
<div>
<h1 style="text-align: center;">Hand-crafted, home-made masterpieces</h1>
<form id="form">
<label for="email"></label>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit" form="form" target="_blank" id="submit"><strong>Let's get started!</strong></button>
</form>
</div>
<div2 id="features">
<section>
<img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
<article>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</article>
</section>
<section>
<img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
<article>
<h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</article>
</section>
<section>
<img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
<article>
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</article>
</section>
</div2>
</body>
</html>

注意:此外，如果你想在多行中显示你的内容，即单行，那么只需在我修改/更新的code;

中进行以下更改

#features {
display: block;
}

移除section和article的背景色。即Yellow和pink.希望这将解决您的问题。

试试这个

section 
{
display: flex;
flex-direction: row;
margin: auto;
background-color: yellow;

}
article 
{
display: flex;
flex-direction: column;
background-color: pink;
}

我重写了你的代码，考虑如下:

片段

您可以完全控制.flex-container > img, article的padding和margin

html {background-color: rgb(220, 220, 220)}
#features{width:100%;text-align:center}
#clip{height:200px;width:200px}
.flex-container {
margin:auto;
max-width:700px;
display: flex;
}
.flex-container > img, article {
background-color: #f1f1f1;
margin: 10px 5px 0 0;
padding: 20px;
font-size: 15px;
}

<div id="features">

<section class="flex-container">
<img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
<article>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</article>
</section>

<section class="flex-container">
<img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
<article>
<h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</article>
</section>

<section class="flex-container">
<img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
<article >
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</article>
</section>

</div>

注意:如果你想了解更多关于flexx的信息，我建议你浏览这个页面

相关内容

最新更新

热门标签：