Question

HTML code：

<div class="box-wrapper">
    <div class="box odd">
        <div class="box-title">TITLE 1</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 2</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 3</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 4</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 5</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 6</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 1</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 2</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 3</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 4</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 5</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p>
        </div>
    </div><div class="box odd">
        <div class="box-title">TITLE 6</div>
        <div class="box-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p>
        </div>
    </div>
</div>

CSS：

.box-wrapper {
    padding: 0;
    margin: 0;
    margin-left: -10px;
    list-style: none;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-around;
}
.box {
    margin-top: 10px;
    padding-left: 10px;
}
.box.odd {max-width: 16.66%;}
.box.even {max-width: 25%;}
.box.side-block {margin: 10px 0; border: 1px solid #ccc;}
.box.side-block .box-title {background-color: #70E070;}
.box.side-block .box-content {padding: 0 8px 8px;}
.box.side-block .box-content p {margin-bottom: 0;}
.box .box-title {background-color: #FF4A4A; color: #fff; text-align: center; margin-bottom: 10px;
    padding: 5px;}
.box.odd .box-title {background-color: #4F8DFF;}
.box.even .box-title {background-color: #FF4A4A;}
.box .box-content {text-align: left;}

以下是codepen中的代码示例：http://codepen.io/anon/pen/WxzmZr

检入Chrome / Firefox，然后检查Safari。在Chrome / Firefox中，我看到所有6个框都对齐（就像我想要的那样）但在Safari中每行显示一个框。

我该如何解决？

提前致谢。

Answer 1

问题在于.box max-width。我只是将它改为宽度，一切正常。

Flexbox无法在Safari中运行，但可在Chrome和Firefox中使用

1 个答案: