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内联，

创建一个名为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应用于类名为leftColumn的div。因此，占据的总空间leftColumn将等于60% of the page + 25px。我将25px添加到总空间中，因为右边距等于5px，左边距等于20px。

由于在将宽度分配到leftColumn和rightColumn时，您没有考虑边距，因为前一行的空间较小，因此rightColumn被推送到下一行。

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 [错误]

3 个答案: