Fatal编程技术网
  • html/
  • Html 显示内联块问题

Html 显示内联块问题

html css

Html 显示内联块问题,html,css,Html,Css,我有两个分区并排排列，它们在桌面上可以按照我的要求工作，但当涉及到移动浏览器（它在chrome mobile上作为桌面浏览器工作）时，比如Mozilla Firefox，其中一个分区Safari推到了底部。我尝试过设置溢出：滚动到div容器，但这并不能解决问题。有人能帮我吗 css .container{ margin: 10px auto 20px auto; display:table; overflow:scroll; } .left_col{ widt

我有两个分区并排排列，它们在桌面上可以按照我的要求工作，但当涉及到移动浏览器（它在chrome mobile上作为桌面浏览器工作）时，比如Mozilla Firefox，其中一个分区Safari推到了底部。我尝试过设置溢出：滚动到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>



如果可能的话，我的解决方案是在父对象上移动设置一个宽度


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

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

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



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


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

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



如果两个元素是内联的，当没有更多的水平空间时，它只会将最后一个元素移动到下一行。@Ibu溢出：滚动怎么样？@Lmxc-
溢出：滚动不起作用，因为没有溢出。通过将最后一个元素流到下一行，所有内容都将适合容器div.+1，还应添加最大宽度：1000px；宽度：100%到容器它应该使它非常灵活！：）