Safari 中的一行中有 2 个 div [错误]

Question

我在尝试在 Safari 中将 2 个 div 放在一行中时遇到了一点问题。它只是用于测试的 HTML (http://www.despegarboido.byethost22.com/) 问题是当我在 Safari 上打开它时，我的所有行都折叠到同一列中。我的 html 看起来像这样：

<div class="row">
    <div class="leftColumn"></div>
    <div class="rightColumn"></div>
</div>

.row {
    display: flex;
    width: auto;
}
.leftColumn {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #ffff33;
    width: 60%;
    height: 330px;
    margin: 5px 20px;
    margin-right: 5px;
    float: left;
}
.rightColumn {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #8cb6dd;
    background: url(images/playa1.jpg);
    background-repeat: no-repeat;
    width: 40%;
    height: 330px;
    margin: 5px 20px;
    margin-left: 5px;
    float: left;
}

这些 div 应该一个挨着一个，它可以在所有其他浏览器上运行，但我找不到让它在 Safari 上运行的方法。

Answer 1

尝试使它们从 CSS 内联，如下所示，

创建一个 class 说 myDiv 并在你的 CSS 中添加下面一行，

.myDiv{
    display: inline;
}

<div class="row">
    <div class="leftColumn myDiv"></div>
    <div class="rightColumn myDiv"></div>
</div>

Here is an example

Answer 2

您应该减小 divs 的宽度。 leftColumn 的宽度为 60%，rightColumn 的宽度为 40%。您的逻辑是正确的，但是您没有考虑到边距。例如，您将以下 margin: 5px 5px 5px 20px 应用于 class 名称 leftColumn 的 div。因此，space leftColumn 占用的总数将等于 60% of the page + 25px。我将 25px 添加到总数 space 中，因为右边距等于 5px，左边距等于 20px。

因为您在将宽度分配给 leftColumn 和 rightColumn 时没有考虑边距，您的 rightColumn 由于 less space 而被推到下一行在上一行。

Answer 3

使用以下代码（最近更新）：

<div class="row">
    <div class="column" id="left">
        <div class="inner" id="leftinner"></div>
    </div>
    <div class="column" id="right">
        <div class="inner" id="rightinner"></div>
    </div>
</div>

body {
    margin: 0px; padding: 0px
}
.row {
    display: flex;
    width: auto;
}
.column {
    padding: 5px 20px;
    float: left;
}
.inner {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    height: 330px;
}
#leftinner {
    background-color: #ffff33;
}
#left {
    width: 60%;
    padding-right: 5px;
}
#rightinner {
    background-color: #8cb6dd;
    background: url(images/playa1.jpg);
    background-repeat: no-repeat;
}
#right {
    width: 40%;
    padding-left: 5px;
}

此版本避免了不必要的重复样式定义，并修复了宽度问题。查看实际效果：http://cssdeck.com/labs/khpx1e8y

Safari 中的一行中有 2 个 div [错误]

2 divs in one row in Safari [error]

html

css

safari