Question

我想要做的是，将两个div放在一行中，左边div的宽度是固定的，右边的div在调整浏览器大小时已经调整大小（已经实现）。我想要实现的是，为正确的div设置一个调整大小限制，也就是说，右边的div宽度减小，直到宽度大于或等于n px。之后浏览器水平滚动。

（原因是我在右侧div上有一个jquery选项卡，有5个标签，当我调整浏览器大小时，标签会跳到彼此的按钮上，因此我想停止正确的div缩小，直到最后一个标签）。

到目前为止，这是我的代码：

<div style="float: left; width: 300px; margin-right: 10px; ">

</div>

<div style="overflow: hidden;">

</div>

请告诉我是否有更好的方法将两个div放在一行中（左边宽度固定，右边可调整大小）。

干杯，

Answer 1

你要么看min-width / max-width，要么@media

对于min-width，只需给div2一个类或id并设置min-width

    #div2{
       min-width:900px;
    }

对于不同屏幕尺寸的控制，请使用@media并设置最大/最小宽度。

    @media only screen and (max-width: 499px) {
      /* rules that only apply for canvases narrower than 500px */
    }

    @media only screen and (min-width: 500px) {
      /* rules that only apply for canvases wider than 500px */
    }

这里有更多信息：http://mislav.uniqpath.com/2010/04/targeted-css/

Answer 2

尝试：

<div class='left'></div>

<div class='right'></div>

<styles>
.left {
    float: left;
    margin-right: 10px;
    width: 300px;
}
.right {
    float: left;
    max-width: 300px;
    overflow-x: auto;
}
</styles>

css定位问题

2 个答案: