英文:
how to set the svg shape between two div tags without leaving any empty space?
问题
我不知道如何将SVG图像设置到顶部，我已经在两个div标签之间放置了标签，并且似乎存在间隙。
我尝试了这段HTML和CSS代码。
<body>
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,224L14.1,229.3C28.2,235,56,245,85,256C112.9,267,141,277,169,250.7C197.6,224,226,160,254,154.7C282.4,149,311,203,339,218.7C367.1,235,395,213,424,213.3C451.8,213,480,235,508,240C536.5,245,565,235,593,218.7C621.2,203,649,181,678,170.7C705.9,160,734,160,762,176C790.6,192,819,224,847,250.7C875.3,277,904,299,932,266.7C960,235,988,149,1016,101.3C1044.7,53,1073,43,1101,32C1129.4,21,1158,11,1186,42.7C1214.1,75,1242,149,1271,181.3C1298.8,213,1327,203,1355,176C1383.5,149,1412,107,1426,85.3L1440,64L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path></svg>
<div class="form">
<div class="header">
<h3>Heading</h3>
<p>Paragraph</p>
</div>
</div>
</div>
</body>
CSS
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.main{
width:100%;
height:100vh;
background:#2ed573;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.form{
background:#1e90ff;
width:200px;
height:50vh;
display:flex;
justify-content:center;
align-items:center;
}
输出结果如下：
我不想要SVG白色图像上面的空白空间。
英文:
I have no idea how to set the SVG image to the top where I have kept the tag between two div tags. And there seems to be a gap.
I tried this code of HTML and CSS.
<body>
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,224L14.1,229.3C28.2,235,56,245,85,256C112.9,267,141,277,169,250.7C197.6,224,226,160,254,154.7C282.4,149,311,203,339,218.7C367.1,235,395,213,424,213.3C451.8,213,480,235,508,240C536.5,245,565,235,593,218.7C621.2,203,649,181,678,170.7C705.9,160,734,160,762,176C790.6,192,819,224,847,250.7C875.3,277,904,299,932,266.7C960,235,988,149,1016,101.3C1044.7,53,1073,43,1101,32C1129.4,21,1158,11,1186,42.7C1214.1,75,1242,149,1271,181.3C1298.8,213,1327,203,1355,176C1383.5,149,1412,107,1426,85.3L1440,64L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path></svg>
<div class="form">
<div class="header">
<h3>Heading</h3>
<p>Paragraph</p>
</div>
</div>
</div>
CSS
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.main{
width:100%;
height:100vh;
background:#2ed573;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.form{
background:#1e90ff;
width:200px;
height:50vh;
display:flex;
justify-content:center;
align-items:center;
}
and output is like this:
and I don't want the empty space above that SVG white image.
答案1
得分: 1
以下是翻译好的部分：
Cause
.main占满整个视窗，.main { justify-content: center }垂直居中其内容。- SVG 只有
320高，所以在较大的屏幕或纵向布局上，它会垂直下移，暴露了其上方.main的绿色背景。
Solution
默认情况下，Flexbox 布局 属性 justify-content 是 flex-start，这基本上是您想要的。 从 .main 中删除 justify-content: center，然后进行调整。
可选地，您可以使用 margin 将 .form 移动到首选位置，或将 .main 设置为 relative，然后使用属性 inset 或属性 top, right, bottom, left 将 .form 移动到 .main 内部。
Snippet
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.main{
width:100%;
height:100vh;
background:#2ed573;
display:flex;
align-items:center;
/* justify-content:center; /* REMOVE */
flex-direction:column;
}
.form{
background:#1e90ff;
width:200px;
height:50vh;
display:flex;
justify-content:center;
align-items:center;
}
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="white" fill-opacity="1" d="M0,224L14.1,229.3C28.2,235,56,245,85,256C112.9,267,141,277,169,250.7C197.6,224,226,160,254,154.7C282.4,149,311,203,339,218.7C367.1,235,395,213,424,213.3C451.8,213,480,235,508,240C536.5,245,565,235,593,218.7C621.2,203,649,181,678,170.7C705.9,160,734,160,762,176C790.6,192,819,224,847,250.7C875.3,277,904,299,932,266.7C960,235,988,149,1016,101.3C1044.7,53,1073,43,1101,32C1129.4,21,1158,11,1186,42.7C1214.1,75,1242,149,1271,181.3C1298.8,213,1327,203,1355,176C1383.5,149,1412,107,1426,85.3L1440,64L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path>
</svg>
<div class="form">
<div class="header">
<h3>标题</h3>
<p>段落</p>
</div>
</div>
</div>
希望这对您有所帮助。
英文:
Cause
.mainis filling the full viewport and.main { justify-content: center }centers its content vertically.- The SVG is only
320tall, so on larger screens or portrait layouts it moves down vertically exposing the green background of.mainabove itself.
Solution
By default Flexbox layout property justify-content is flex-start, which is essentially what you want. Remove justify-content: center from .main and take it from there.
Optionally, you can move .form to a preferred location using margin or make .main relative and move .form absolute inside main using property inset or properties top, right, bottom, left.
Snippet
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.main{
width:100%;
height:100vh;
background:#2ed573;
display:flex;
align-items:center;
/* justify-content:center; /* REMOVE */
flex-direction:column;
}
.form{
background:#1e90ff;
width:200px;
height:50vh;
display:flex;
justify-content:center;
align-items:center;
}
<!-- language: lang-html -->
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="white" fill-opacity="1" d="M0,224L14.1,229.3C28.2,235,56,245,85,256C112.9,267,141,277,169,250.7C197.6,224,226,160,254,154.7C282.4,149,311,203,339,218.7C367.1,235,395,213,424,213.3C451.8,213,480,235,508,240C536.5,245,565,235,593,218.7C621.2,203,649,181,678,170.7C705.9,160,734,160,762,176C790.6,192,819,224,847,250.7C875.3,277,904,299,932,266.7C960,235,988,149,1016,101.3C1044.7,53,1073,43,1101,32C1129.4,21,1158,11,1186,42.7C1214.1,75,1242,149,1271,181.3C1298.8,213,1327,203,1355,176C1383.5,149,1412,107,1426,85.3L1440,64L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path>
</svg>
<div class="form">
<div class="header">
<h3>Heading</h3>
<p>Paragraph</p>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论