2023年3月12日 19:47:28go评论73阅读模式

英文:

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.

&lt;body&gt;
  &lt;div class=&quot;main&quot;&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 320&quot;&gt;&lt;path fill=&quot;white&quot; fill-opacity=&quot;1&quot; d=&quot;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&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
      &lt;div class=&quot;form&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
          &lt;h3&gt;Heading&lt;/h3&gt;
          &lt;p&gt;Paragraph&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

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

.main is filling the full viewport and .main { justify-content: center } centers its content vertically.
The SVG is only 320 tall, so on larger screens or portrait layouts it moves down vertically exposing the green background of .main above 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

*{
  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;
}

&lt;div class=&quot;main&quot;&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 320&quot;&gt;
        &lt;path fill=&quot;white&quot; fill-opacity=&quot;1&quot; d=&quot;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&quot;&gt;&lt;/path&gt;
    &lt;/svg&gt;
    &lt;div class=&quot;form&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h3&gt;Heading&lt;/h3&gt;
            &lt;p&gt;Paragraph&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在两个div标签之间设置SVG形状，而不留下任何空白空间？

问题

答案1

如何在Next.js应用中解决链接预加载警告？

如何解决HTML和CSS上的display: flex问题？

只能使用
和
来创建 div 包装框吗？

CSS代码来将英文数字修改为丹麦数字

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论