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

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

.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;
}

显示内联块问题

2 个答案: