flexbox 相关问题

给予包裹的弹性盒项目垂直间距

我最近第一次使用 Flexbox，总的来说，它绝对是令人惊奇的。然而，我最近遇到了一个问题，我似乎无法提供包裹的弹性项目......

在中心列容器上设置宽度时，图像横幅和链接包装器未与 CSS 网格布局中的中心对齐

我正在尝试在导航布局的中心列中居中对齐图像和一组链接。当我没有指定 .center-column 元素的宽度时，对齐效果很好。豪...

Flexbox 容器内的内容不显示内联链接

我对 Flexbox 相当陌生，但似乎无法在这里找到答案。我有一个 标签，我已将其制作成弹性容器，并且在 中我想插入一个链接... 我对 Flexbox 相当陌生，但似乎无法在这里找到答案。我有一个 <p> 标签，我已将其制作成弹性容器，并且在 <p> 中我想插入一个与文本内联的链接。 所需结果： 但是我得到的结果是这样的： 我可以获得预期结果的唯一方法是将 <a> 标签的显示属性更改为“内容”，但是快速查看 CanIUse 显示 IE 不支持它，我需要它来完成此任务。 我也不想重构 HTML，因为这是要以所见即所得的方式呈现，并且简单地将类添加到 <p> 标签将是最好的方案。 我已经在这里笔写了这个问题，用的是scss版本，编译后的代码也贴在下面。任何帮助都会很棒。 .my-alert { width: 500px; padding: 10px; border: 5px solid; font-weight: bold; display: flex; justify-content: start; align-items: center; font-weight: 900 !important; } .my-alert:before { font-family: 'Font Awesome 5 Free'; font-size: 40px; display: flex; align-items: center; padding-right: 20px; font-weight: 900 !important; } .my-alert-success { color: green; border-color: green; } .my-alert-success:before { content: '\f058' }<p class="my-alert my-alert-success">Quam diu etiam furor iste tuus nos eludet? Excepteur sint obcaecat cupiditat non proident culpa.<a href="/">Here is my link.</a> And here is more content.</p> 不要在这里使用display:flex，因为它会将其容器内的所有元素视为“块”。 .my-alert { width: 500px; padding: 10px; border: 5px solid; font-weight: bold; /*display: flex; */ padding-left:40px; justify-content: start; align-items: center; font-weight: 900 !important; float:left; position: relative; &:before { font-family: 'Font Awesome 5 Free'; font-size: 40px; display: flex; align-items: center; padding-right: 20px; font-weight: 900 !important; position:absolute; left:8px; top:50%; transform:translateY(-50%); } } .my-alert-success { color: green; border-color: green; &:before { content: '\f058'; } } 只需为 display:contents 标签添加 <a> 即可。 .my-alert { display: flex; } .my-alert a { display: contents; } ..弹性容器的子级被迫具有块风味 显示类型。

为什么我应用box-shadow时div下面会留有空白？

我正在尝试制作一个包含 3 个图像的页面，每个图像都在一个 div 内，但是当应用 box-shadow 时，下面有一个间隙。 包含问题示例的图像 身体 { 边距：...</desc> <question vote="0"> <p>我正在尝试制作一个包含 3 个图像的页面，每个图像都在一个 div 内，但是当应用 box-shadow 时，下面有一个间隙。</p> <p><a href="https://i.sstatic.net/BHtrUKhz.jpg" rel="nofollow noreferrer">包含问题示例的图像</a></p> <pre><code>&lt;style&gt; body { margin: 0; } .img img { width: 300px; height: 300px; } .contenedor { display: flex; justify-content: center; align-items: center; height: 100vh; } .tarjeta { margin: 20px; position: relative; box-shadow: 0px 0px 10px 10px gray; } .cuerpo { position: absolute; top: 0; } &lt;/style&gt; &lt;body&gt; &lt;div class=&#34;contenedor&#34;&gt; &lt;div class=&#34;tarjeta&#34;&gt; &lt;div class=&#34;img&#34;&gt; &lt;img src=&#34;img/image1.jpg&#34; alt=&#34;&#34;&gt; &lt;/div&gt; &lt;div class=&#34;cuerpo&#34;&gt; &lt;div class=&#34;texto&#34;&gt; &lt;h3&gt;Juanita&lt;/h3&gt; &lt;p&gt;Modelo: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, nihil.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>我想将盒子阴影效果应用到每个 div 上，而不在下面留下间隙。我尝试将 height: 100% 应用于图像，以便它们占据 div 的整个高度，但它不起作用。这个问题仅在应用box-shadow时出现；如果我消除这个效果，这个差距就会消失。我还尝试过调整边距、填充和框大小属性，但它们似乎都不能解决问题。我正在寻找一种解决方案，允许我应用盒子阴影效果，而不会在 div 之间创建任何不需要的间隙。</p> </question> <answer tick="false" vote="0"> <p>这是因为，默认情况下，图像是 <pre><code>display: inline</code></pre> 并与任何相邻文本的基线对齐。基线下方的空间用于文本中的下行部分。</p> <p>最简单的解决方法是将图像本身设置为 <pre><code>display: block</code></pre> 或 <pre><code>display: inline-block</code></pre>。另一种选择是将父级的行高调整为小于 1 的值。</p> </answer> </body></html>

如何将文本与背景颜色对齐？

第一次在论坛发帖。 我是编程初学者，目前正在学习网络开发。 我在尝试重新创建 Google 主页时偶然发现了这个问题。 这是导航...

文本较短时如何在聊天气泡布局中对齐元数据（时间和图标）？

它应该如何看起来“正确的版本” 看起来如何，“版本不正确” 当文本很长时，元数据看起来不错，但是，当文本很短时，例如，用户......

浮动在弹性盒（或等效物）内

float：右侧在弹性盒子内不起作用。 （它不能正确浮动，也不能跨越几行。） 请告知如何实现与包含大浮动的 Flexbox 相对应的布局...

浮动在弹性盒内

float：右侧在弹性盒子内不起作用。 请告知如何实现与弹性盒内具有浮动相对应的布局。 。容器 { 显示：柔性； 弹性包裹：包裹； 对齐它...

为什么 <img> 元素没有采用我用 CSS 告诉的确切宽度？

我正在使用 CSS 选择一个 元素并为其应用宽度，但是，当我检查浏览器生成的元素的计算值（生成的 ）时，我看到了不同的

强制弹性项目跨越整个行宽度

我试图将前2个子元素保留在同一行，而第三个元素则在其自己的下方以全宽显示，同时使用flex。 我对使用 flex-grow 特别感兴趣...

纯css堆叠卡片效果带粘性位置，无javascript

我正在研究这些卡片堆叠的部分，问题是他们使用位置：粘性来做到这一点，当卡片的效果结束时，卡片会穿过“粘性标题”...

内联元素的轮廓不可见

我有一个锚标签。我已经给出了这个锚标记的轮廓。但是这个轮廓是不可见的，除非锚标签有一个display:flex。 在下面的示例中，有两个锚标记。

检测元素进入 Flex-wrap 容器中下一个轴的时刻

我有一个类似于以下代码的代码，我将其作为一个简单的示例来表示问题。 反应组件代码： 从 'react' 导入 { useState, useRef, useEffect, useCallback } 导入'...

防止div在flex模式下增长

我读过很多面临这个问题的帖子，但没有解决方案适合我。问题很简单。以下是该结构的概述： 我读过很多面临这个问题的帖子，但没有解决方案适合我。问题很简单。以下是结构概述： <div id=mainDiv> <div id=banner></div> <div id=expectedDivWithScrollBar> <table> Very height table </table> </div> </div> 我期望 DivWithScrollBar 能够获取视口的剩余可用高度（在横幅下）： display:flex; flex: 1 0 auto; 现在，在这个 div 中，我有一个可以变得比 div 更大的表格。 我想在该 div 中有一个滚动条，而不是在主 div 中，因为我不想滚动横幅。 没有表格，expectedDivWithScrollBar的尺寸是完美的，自动计算的。 我虽然在expectedDivWithScrollBar中添加“overflow: auto”可以解决问题，但没有效果。 Fly-shrink to 0 也不起作用。 我看到的所有解决方案似乎都依赖于在 ExpectedDivWithScrollBar （或他的父母之一）上设置大小，但这是不可接受的。一切都是动态大小的...... 感谢您的帮助！ 如何将 #mainDiv 更改为带有 flex-direction: column 的弹性容器？ 这样您就可以确保表格只占用您横幅下的剩余空间。 在下面的可运行示例中，我将横幅标记为红色，表格标记为蓝色，如您所见，表格的高度可滚动，不会影响布局的其余部分。 #mainDiv { display: flex; flex-direction: column; height: 100vh; } #banner { height: 40px; flex: 0 0 auto; background: red; } #expectedDivWithScrollBar { flex: 1 1 auto; overflow: auto; } table { height: 120vh; background: blue; } <div id=mainDiv> <div id=banner>Banner</div> <div id=expectedDivWithScrollBar> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </div>

Bootstrap 5 选项卡窗格无法与 Flexbox 正常配合工作

我直接从文档页面使用准系统 Bootstrap 5 选项卡（药丸）设置： 我直接从 Docs 页面使用准系统 Bootstrap 5 选项卡（药丸）设置： <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div> 然后我用 tab-panes 填充 floating-divs： .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } 到目前为止，一切都按预期进行 - JsFiddle . 然后我将标准 Bootstrap 的 Flexbox 类应用到 tab-pane，以根据我的喜好对齐选项卡内容 d-flex flex-wrap justify-content-between。 这就是整个事情开始走下坡路的地方 - JsFiddle . 第一个 tab-pane 中的内容布局方式正是我所追求的，但由于某种原因，所有其他 tab-pane 中的内容都向下移动。不仅如此，仔细检查后发现，每个 tab-pane 都包含所有应该分布在 3 个不同 div 上的 floating-div，其中一些是不可见的... 现在我的问题是：我的 CSS 或我使用 Bootstrap 的 Flexbox 类的方式有问题吗？还是 Bootstrap 中的错误？ 因为“.d-flex”属性带有“display: flex! Important”说明符。 但是“.tab-content> .tab-pane”仅使用“display: none”格式。在这种情况下，“.d-flex”将占主导地位，并且在所有情况下都将保持为“display: flex”。 另一方面，由于“opacity: 0”是不可见的，但它会占用空间。 为了解决这个问题， 方法一： 在“.tab-pane”内创建一个新元素。 <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> </div> 方法二： 编写一个新类。 “.d-maybe-flex” .d-maybe-flex { display: flex; } <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> 示例1 .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> </div> </div> </div> 示例2 .d-maybe-flex { display: flex } .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> </div> <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> </div> </div> .d-flex类应用display: flex !important，覆盖display: none中的.tab-content > .tab-pane，使其保持可见。 此外，opacity: 0使元素不可见，但仍然占用空间。 解决方案： 您可以通过确保 Flexbox 布局仅影响 active 选项卡窗格，而不影响隐藏的选项卡窗格来解决此问题。 一种可能的方法是使用 CSS 规则，将 display: none 和 !important 应用于具有 .tab-pane 类但不活动 的 d-flex 元素。以下是如何做到这一点的示例： .tab-pane.d-flex:not(.active) { display: none !important; }

Flex 奇怪地计算宽度，而网格不计算宽度

这里唯一的区别是父树，子树的样式完全相同。 Grid 正确计算第一个元素（绿色轮廓部分）的宽度，但 flex 将其设置为 0 并允许 ov...

如何将图像裁剪到div边框？

我正在尝试将图像裁剪到 div 边框，如下图所示（最右边的 div）： 网站图片 我尝试了以下方法： div { /*社交媒体安排。*/ 网格面积：c； 内边距：30px 0；

如何设置两个并排的div独立滚动？

我有一个主要父级 div。其中有两个 div，左、右。我能够使左右 div 独立滚动。然而，在右侧的 div 中，又出现了两个 div (...

从CSS网格布局更改为flexbox

我的任务是将使用 CSS 网格的给定代码更改为使用 CSS Flexbox 布局的代码。 这是给定的 HTML 结构： 我的任务是将使用 CSS 网格的给定代码更改为使用 CSS Flexbox 布局的代码。 这是给定的 HTML 结构： <div class="listing-grid"> <div class="listing"> <img class="listing-image" src="something.jpg" alt="something"> <div class="listing-details"> <h3>Item 1</h3> </div> <div class="listing-price"> <p>Price: €8</p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="something.jpg" alt="something"> <div class="listing-details"> <h3>Item 2</h3> </div> <div class="listing-price"> <p>Price: €5/p> </div> <a href="details.html" class="details-button">Details</a> </div> ...(4 more of these card like elements) <div> .listing-grid { display: grid; grid-template-columns: repeat(auto-fit, 300px); gap: 10px; padding: 10px; justify-content: center; align-content: center; } 代码生成了一个如下所示的网格： item1 item2 item3 item4 item5 item6 当我使用以下方式更改为 Flexbox 时： .listing-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; justify-content: center; align-content: center; } and adding to: .listing { width: calc(25% - 20px); } 我得到了这样的布局： item1 item2 item3 item4 item5 item6 我尝试将justify-content: center更改为justify-content: left，但这会将卡片向左对齐并将整个部分向左移动，这不适合我。也这样做，但添加 margin-left 似乎是解决这个问题的愚蠢方法，特别是因为它没有响应。 还有其他方法可以在保留响应式设计和所需的卡片布局的同时使用 Flexbox 布局来实现此目的吗？ left 不是 justify-content 的有效值。您需要使用值 start。 .listing-grid { justify-content: start; } 演示片段： .listing-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: start; align-content: center; } .listing { width: calc(25% - 20px); } .listing img { max-width: 100%; } .listing h3, .listing p { margin: 0; } <div class="listing-grid"> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 1</h3> </div> <div class="listing-price"> <p>Price: €1</p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 2</h3> </div> <div class="listing-price"> <p>Price: €2/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 3</h3> </div> <div class="listing-price"> <p>Price: €3/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 4</h3> </div> <div class="listing-price"> <p>Price: €4/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 5</h3> </div> <div class="listing-price"> <p>Price: €5/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 6</h3> </div> <div class="listing-price"> <p>Price: €6/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div>

对于CSS的“align-items”，“flex-start”和“stretch”有何不同？

align-items 属性的flex-start 和stretch 值有何不同？ 。容器 { 高度：500px； 内边距：10px； 边距：50px 自动； 背景：#eee； 显示：柔性； 对齐它...