Question

我想要一个符合其父级宽度及其内容高度的方框（div）。在里面，我想按顺序显示：

svg image
div with content
svg图片（相同但颠倒）

我已将外部div设置为内联网格，宽度为100％，但是顶部svg是否位于div之下，或者div是否扩展了svg？（以某种方式重叠）。底部的svg超过了div，这是不允许的。

如果我删除外部div的100％宽度（.card类），项目正确对齐并且彼此不重叠，但我需要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

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

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

正确定位svg与div内联 - 在父div中，如何才能完成？

2 个答案: