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定位的問題

回答

相關問題