在 a 中设置“width: auto”<div> 用“显示：弯曲； flex-direction：行”不起作用</div><div id="text_translate"><p>我正在尝试将一堆 div 并排放置，从左到右。 所以我使用 flexbox 方向设置为row 。</p><p> 我希望这些 div 中的每一个都从里面的内容中导出它们的高度和宽度，因此我将它们的高度和宽度保留为默认值。</p><p> 最后，我想使用 svg 作为背景。 为此，我使用了一个网格容器并将 svg 和 div 放置在同一列和同一行中，如此<a href="https://stackoverflow.com/a/51949049/9613633" rel="nofollow noreferrer">stackoverflow 帖子</a>中所建议的那样。 我将 svg 的高度和宽度设置为100% ，以确保它填充整个背景。</p><p> 但是，当我将所有内容组合在一起时，div 的宽度设置不正确。 div 的高度似乎是由里面的内容设置的，但宽度似乎总是默认为300px 。 对于我的一生，我无法弄清楚这个宽度是如何计算的。 如果内容比300px宽，那么一切都按预期工作。 但是如果内容小于300px ，则容器永远不会缩小以适应。</p><p> 如何确保 div 始终缩小以适应？ 请参阅下面的代码示例： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> This div has calculated width 300px for some reason &lt;div class="top"&gt; &lt;div class="grid-container" key="1"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; ab &lt;/div&gt; &lt;/div&gt; &lt;,-- more grid-containers --&gt; &lt;/div&gt; This works as expected &lt;div class="top"&gt; &lt;div class="grid-container"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; abcdefghijkl &lt;/div&gt; &lt;/div&gt; &lt;!-- more grid-containers --&gt; &lt;/div&gt;</pre></div></div><p></p></div>

Question

我正在尝试将一堆 div 并排放置，从左到右。 所以我使用 flexbox 方向设置为row 。

我希望这些 div 中的每一个都从里面的内容中导出它们的高度和宽度，因此我将它们的高度和宽度保留为默认值。

最后，我想使用 svg 作为背景。 为此，我使用了一个网格容器并将 svg 和 div 放置在同一列和同一行中，如此stackoverflow 帖子中所建议的那样。 我将 svg 的高度和宽度设置为100% ，以确保它填充整个背景。

但是，当我将所有内容组合在一起时，div 的宽度设置不正确。 div 的高度似乎是由里面的内容设置的，但宽度似乎总是默认为300px 。 对于我的一生，我无法弄清楚这个宽度是如何计算的。 如果内容比300px宽，那么一切都按预期工作。 但是如果内容小于300px ，则容器永远不会缩小以适应。

如何确保 div 始终缩小以适应？ 请参阅下面的代码示例：

 .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }

 This div has calculated width 300px for some reason <div class="top"> <div class="grid-container" key="1"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"> <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> ab </div> </div> <,-- more grid-containers --> </div> This works as expected <div class="top"> <div class="grid-container"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"> <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> abcdefghijkl </div> </div> <!-- more grid-containers --> </div>

Answer 1

我可以通过添加position: relative;来解决这个问题。 到.grid-container和position: absolute; 到svg然后给.content一个z-index:1;

看这里：

 .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; width: auto; position: relative; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; position: absolute; }.content { grid-column: 1; grid-row: 1; font-size: 100px; z-index:1; }

 This div has calculated width 300px for some reason <div class="top"> <div class="grid-container" key="1"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"> <polygon id="diamond" strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> ab </div> </div> <,-- more grid-containers --> </div> This works as expected <div class="top"> <div class="grid-container"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"> <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> abcdefghijkl </div> </div> <!-- more grid-containers --> </div>

Answer 2

您可以尝试使用 SVG 作为.grid-container （内联或链接）的背景图像，因此您无需将其插入到每个单独的 div 中。 重要的是，SVG 必须具有preserveAspectRatio = 'none' ：

 .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-10 -10 20 20' preserveAspectRatio='none'> <polygon strokeWidth='0' fill='yellow' points='0,-10 10,0 0,10 -10,0'/> </svg>"); background-repeat: no-repeat; background-size: cover; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }

 <div class="top"> <div class="grid-container" key="1"> <div class="content"> ab </div> </div> <!-- more grid-containers --> </div> <div class="top"> <div class="grid-container"> <div class="content"> abcdefghijkl </div> </div> <!-- more grid-containers --> </div>

Answer 3

有一个默认宽度/高度应用于创建此 output 的 SVG 元素。 为避免此问题，请确保将属性宽度/高度设置为 0

 .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }

 This div has calculated width 300px for some reason <div class="top"> <div class="grid-container" key="1"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none" width="0" height="0"> <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> ab </div> </div> <,-- more grid-containers --> </div> This works as expected <div class="top"> <div class="grid-container"> <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none" width="0" height="0"> <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /> </svg> <div class="content"> abcdefghijkl </div> </div> <!-- more grid-containers --> </div>