Question

我正在一个网站上工作，网页的主要内容上有两个框项目，它看起来像这样：

-----------------  ----------------
|               |  |              |
|               |  |              |
|               |  |              |
|               |  |              |
-----------------  ----------------

当浏览器尺寸为1024 x 768及以上时，该网站看起来没问题。但是当我将浏览器水平调整到较小的尺寸时，右边的框与左框“碰撞”并且存在一些重叠。

我对CSS有一个基本的了解，但我接手的网站很大程度上是用于CSS。

我想要的是当我将浏览器调整到较小的尺寸时，我希望右边的框保持在原位，并在浏览器的底部显示一个水平滚动条。

以下是截图：

http://www.skoolrox.com/collision.jpg

我知道我需要刷新我的CSS，但我的问题是，当我在CSS上搜索时，我想查找以下关键字：

CSS，固定，定位。

由于我不是CSS大师，听起来不对，或者我在搜索中遗漏了其他关键字。

Answer 1

在元素周围使用固定尺寸包装。

以下是一个示例

<div id="wrapper">
  <div class="float-left">

  </div>
  <div class="float-left">

  </div>
  <br style="clear: both" />
</div>

<强> CSS

#wrapper {
  width: 1000px;
}
  #wrapper .float-left {
    float: left;
    width: 500px;
  }

Answer 2

您可以为每个框添加display:inline-block;，然后将它们放在容器中。

#container{
    width:300px;
}

#one, #two{
    background:red;
    height:200px;
    width:100px;
    display:inline-block;
    margin:1em;
}

示例： http://jsfiddle.net/jasongennaro/J2pZX/

Answer 3

试试这个：

HTML：

<div id="container">
      <div id="wrapper">
            <div class="flt-left column">

            </div>
            <div class="flt-right column">

            </div>
            <br style="clear: both" />
    </div>
</div>

CSS：

#container
{   min-width:450px;
    overflow:auto;
}
#wrapper
{   width:100%;
}
.flt-left
{   float:left;
}
.flt-right
{ float:right;
}
#wrapper .column
{   width:49%;
    background:#f00;
    height:100px;
    min-width:200px;
}

示例：JSFiddle

CSS定位问题

3 个答案: