简体   繁体   English

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

[英]HTML/CSS left and right div side by side on Chrome but not on Safari/Firefox

I am having a hard time aligning divs side by side in Firefox and Safari, however it works great in Chrome. 我很难在Firefox和Safari中并排对齐div,但是在Chrome中效果很好。 It is hard to give all the css because I have a mobile stylesheet, a normal one, and then the print one which is the one in question. 很难给出所有的CSS,因为我有一个移动样式表,一个普通的样式表,然后是一个有问题的样式表。 The other stylesheets work great. 其他样式表效果很好。 If more information is needed to solve this please let me know. 如果需要更多信息来解决此问题,请告诉我。

My website is at http://bidonmoving.com/Template1/website.php for more details 我的网站位于http://bidonmoving.com/Template1/website.php了解更多详细信息

A image of the Chrome page: Chrome页面的图片: http://bidonmoving.com/Resify/Resumes/Template1/images/chrome.png

A image of the Firefox page: Firefox页面的图像: http://bidonmoving.com/Resify/Resumes/Template1/images/firefox.png

My HTML setup is basically as follows: 我的HTML设置基本上如下:

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

And the CSS is: 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;
}

Change your css as - 将您的CSS更改为-

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

change your CSS to this 将您的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;

}

I resolved the issue by adding a top css element to .right-content, this however made Chrome's right side go down more than it should and flipped the problem from all other browsers to just Chrome being the problem. 我通过在.right-content中添加一个顶级CSS元素解决了该问题,但是这使Chrome的右侧下降了很多,并将问题从所有其他浏览器转移到了Chrome本身。 I used a css hack to make Chrome work and from what I see it works great. 我使用css hack来使Chrome正常运行,从我看来,Chrome的运行非常出色。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM