html - 显示内联块问题

Question

我有一个并排对齐的两个 div，它们可以在桌面上按我想要的方式工作，但是对于移动浏览器（它可以在 chrome 移动设备上作为桌面浏览器工作），比如 Mozilla Firefox，Safari 中的一个 div 推到了底部。我试过设置溢出：滚动到 div 容器，但这并不能解决问题。有人可以帮我吗？

css

.container{
    margin: 10px  auto 20px auto;
    display:table;
   overflow:scroll;
} 

.left_col{
    width: 700px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

.right_col{
    width:300px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    height:1090px;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

html

<div class="container">
    <div class=left_col"></div>
    <div class="right_col"></div>
</div>

Answer 1

您的视口在移动浏览器上不够宽，无法修复 1000 像素的内容。如果要保持该布局，请考虑使用百分比宽度。

.left_col{
    width: 70%;
    float:left;
}

.right_col{
    width:30%;
    float:left;
}

Answer 2

如果可能，我的解决方案是在父级上移动设置宽度。

.container{
   ...
   width:1024px;
} 

.left_col{
    width: 700px;
    float:left;
}

.right_col{
    width:300px;
    float:left;
}