CSS定位的问题

我在一个网站上的工作，其中有在页面的主要内容的两个箱子的物品，它看起来是这样的：CSS定位的问题

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

当浏览器尺寸为1024 x 768和上面，该网站看起来不错。但是，当我将浏览器水平调整为较小的尺寸时，右侧的框与左侧的框“碰撞”，并且存在一些重叠。

我对CSS有了基本的了解，但我接管的网站大量使用CSS。

我想要的是，当我将浏览器调整到更小的尺寸时，我想让正确的方块保持在正确的位置，并在浏览器底部显示水平滚动条。

下面是截图：

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

我知道我需要刷上了我的CSS，但我的问题是，当我做我的CSS搜索，我想看看像关键词：

CSS，固定，定位。

因为我不是CSS大师，这听起来是对的，还是我在搜索中错过了其他关键字。

来源

2010-08-11 coson

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

下面是一个例子

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

来源

2010-08-11 21:18:16 Marko

你可以给每个箱子一个display:inline-block;，然后把它们放在一个容器中。

#container{ 
    width:300px; 
} 

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

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

来源

2011-09-25 02:13:25

试试这个：

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

来源

2011-09-25 03:47:58 Sanooj

CSS定位的问题

回答

相关问题