Question

我无法弄清楚为什么flexbox儿童在iPad（Chrome和Safari）上没有相同的高度。测试时，这在桌面上运行正常：

但这就是它在iPad上的样子：

HTML结构：

<div class="flex-grid-quarters">
            <div class="tile col">
                <div class="tile-content border martlet">
                    <img src="/images/martlet.jpg"/>
                </div>
            </div>
            <div class="tile col quicklinks">
                <div class="tile-content border">
                    <h3>Quick Links</h3>
                    {module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
                </div>
            </div>
            <div class="tile col gold-links">
                <div class="tile-content border">
                    <a href="#" class="external-link">Mill Hill Enterprise</a>
                    <a href="#" class="external-link">Development Office</a>
                    <a href="#" class="external-link">Mill Hill School Foundation</a>
                    <a href="#" class="external-link">National Liberal Club</a>
                </div>
            </div>
            <div class="tile col contact-us">
                <div class="tile-content border">
                    <h3>Contact Us</h3>
                    <p>Old Millhillians Club</p>
                    <p>Mill Hill School</p>
                    <p>The Ridgeway</p>
                    <p>London NW7 1QS</p>
                    <br/>
                    <p>t 020 8906 7948 / 7949</p>
                    <p>e sk@millhill.org.uk</p>
                </div>
            </div>
        </div>

CSS：

.flex-grid-quarters, .flex-grid-thirds {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-grid-quarters .col {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 25%;
}

我不认为有必要展示：对孩子们进行展示，但我还是补充说，无论如何都试图让它运转起来。没有这样的运气（无论是否有结果都是完全相同的）。如果有人需要，该网站的链接是http://omclub.streeten.co.uk/任何帮助非常感谢。

Answer 1

有大量不再需要的供应商前缀，所以我删除了除justify-content和display: flex;之外的所有内容。看起来每个flex项目具有相同的高度。不幸的是我无法在iPad上测试它（它是我还没有的唯一设备）

段

.flex-grid-quarters, .flex-grid-thirds {
    display: flex;
    justify-content: center;
}

.flex-grid-quarters .col {
    width: 25%;
    outline: 3px dashed red;
}

<!doctype html>
<html>
  
<head>
  <meta charset='utf-8'>
  
  </head>
<body>
<div class="flex-grid-quarters">
            <div class="tile col">
                <div class="tile-content border martlet">
                    <img src="/images/martlet.jpg"/>
                </div>
            </div>
            <div class="tile col quicklinks">
                <div class="tile-content border">
                    <h3>Quick Links</h3>
                    {module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
                </div>
            </div>
            <div class="tile col gold-links">
                <div class="tile-content border">
                    <a href="#" class="external-link">Mill Hill Enterprise</a>
                    <a href="#" class="external-link">Development Office</a>
                    <a href="#" class="external-link">Mill Hill School Foundation</a>
                    <a href="#" class="external-link">National Liberal Club</a>
                </div>
            </div>
            <div class="tile col contact-us">
                <div class="tile-content border">
                    <h3>Contact Us</h3>
                    <p>Old Millhillians Club</p>
                    <p>Mill Hill School</p>
                    <p>The Ridgeway</p>
                    <p>London NW7 1QS</p>
                    <br/>
                    <p>t 020 8906 7948 / 7949</p>
                    <p>e sk@millhill.org.uk</p>
                </div>
            </div>
        </div>
  </body>
</html>

Flexbox儿童在iPad上没有相同的高度

1 个答案:

段