Question

我很难在Firefox和Safari中并排调整div，但它在Chrome中效果很好。很难给出所有的CSS，因为我有一个移动样式表，一个普通的样式表，然后是一个有问题的打印样式表。其他样式表工作得很好。如果需要更多信息来解决这个问题，请告诉我。

我的网站位于http://bidonmoving.com/Template1/website.php了解更多详情

Chrome页面的图片：

Firefox页面的图片：

我的HTML设置基本如下：

<div class="page">
    <div class="content">
                    <div class="left-content"></div>
                    <div class="right-content"></div>
            </div>
    </div>

CSS是：

.page {
    clear:both;
    background-image: none;
    background-color:none;
    margin: 50px auto;
    margin-left:30px;
    border:0;
    outline:none;
}
.content {
    clear: both;
    margin: 0px auto;
    width: 1000px;
    background: #ccc;
    position: relative;
    border:0;
    outline:0;
    -webkit-box-shadow:none;
    -webkit-box-shadow:none;
}
.left-content{
    width:450px;
    text-align:left;
}
.right-content{
    width:450px;
    position:absolute;
    margin-top:0px;
    padding-top:0px;
    margin:0px;
}

Answer 1

将您的CSS改为 -

.left-content{
    width:450px;
    text-align:left;
    float:left;
 }
 .right-content{
    width:450px;
    float:right; (or float:left and some margin-left)
  }

Answer 2

将您的CSS更改为此

.left-content{
    width:450px;
    display:inline-block;
vertical-align:top;
margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}
.right-content{
    width:450px;
    display:inline-block;
vertical-align:top;
    margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}

Answer 3

我通过在.right-content中添加一个顶级css元素解决了这个问题，但是这使得Chrome的右侧比它应该更容易下降，并且将问题从所有其他浏览器转移到只是Chrome就成了问题。我使用了一个css hack来使Chrome工作，并且从我看来它很有用。

HTML / CSS左右并排在Chrome上，但不在Safari / Firefox上

3 个答案: