正确定位 svg 与 div 的内联 - 在父 div 内，怎么做？

Question

我想要一个适合其父级宽度和内容高度的框 (div)。在里面我想按顺序显示：

• svg 图片
• 带有内容的div
• svg 图片（相同但上下颠倒）

我已将外部 div 设置为具有内联网格，宽度为 100%，但顶部 svg 位于 div 下方，或者 div 在 svg 上方展开？ （不知何故重叠）。底部的svg超过了over div，这是不允许的。

如果我删除外部 div（.card 类）的 100% 宽度，项目会正确对齐并且不会相互重叠，但我需要 100% 宽度，这可能吗？

这是我的尝试：jsFiddle

样式

<style>
    .card {
        width: 100%;
        display: grid;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
    }

    .section {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align-last: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        display: inline-grid;
    }

    .svg {
        max-width: 100%;
        height: auto;
        fill: #FFFF00;
    }

    .svgBottom {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg); 
        transform: rotate(180deg);
    }

html

<div class='card'>
        <div class='section'>

            <svg class='svg' version='1.1' 
                id='spikes' 
                xmlns='http://www.w3.org/2000/svg' 
                xmlns:xlink='http://www.w3.org/1999/xlink' 
                viewBox='0 0 2000 150' 
                xml:space='preserve'>

                <path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
            </svg>

            <div id='sectionDiv' style='background-color: red;'>
                <h1>Section 2</h1>
                <p>some content</p>
                <p>some content some content</p>
                <p>some content</p>
                <p>some content some content some content</p>
            </div>

            <svg class='svg svgBottom' version='1.1'
                xmlns='http://www.w3.org/2000/svg' 
                xmlns:xlink='http://www.w3.org/1999/xlink' 
                viewBox='0 0 2000 150' 
                xml:space='preserve'>

                <path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
            </svg>
        </div>
    </div>

想要的结果：

Answer 1

试试这个。我将边距归零，删除了似乎不必要的 inline-grid，并将 SVG 设置为 display:block。

* {
  margin: 0
}

.card {
  width: 100%;
  display: grid;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 0.25rem;
}

.section {
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.svg {
  max-width: 100%;
  height: auto;
  fill: #FFFF00;
  display: block;
  /* required*/
}

.svgBottom {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<div class='card'>
  <div class='section'>

    <svg class='svg' version='1.1' id='spikes' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 150' xml:space='preserve'>
				
					<path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
				</svg>

    <div id='sectionDiv' style='background-color: red;'>
      <h1>Section 2</h1>
      <p>some content</p>
      <p>some content some content</p>
      <p>some content</p>
      <p>some content some content some content</p>
    </div>

    <svg class='svg svgBottom' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 150' xml:space='preserve'>
				
					<path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
				</svg>
  </div>
</div>

Answer 2

我建议使用 de flexbox 系统，将此代码添加到您的 css 中：

.section {
    display: flex;
    flex-direction: column;
}
svg {
    height: 100%;
}