鍍金池/ 問答/HTML5  HTML/ 左側(cè)固定定位，左側(cè)自適應(yīng)，在窗口改變的時(shí)候怎么保證不重疊？

左側(cè)固定定位，左側(cè)自適應(yīng)，在窗口改變的時(shí)候怎么保證不重疊？

圖片描述

請(qǐng)問怎么保證窗口變小的時(shí)候這兩個(gè)內(nèi)容不重疊？

回答
編輯回答
誮惜顏

兩個(gè)內(nèi)容外面再加個(gè)div 吧. 一般用 flex 實(shí)現(xiàn)最簡(jiǎn)單，或者可以下面這樣。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>

body{
  margin:0;
}
#container {
  padding-left: 200px;   /* LC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
  background-color: #ddd
}
#left {
  position: fixed !important;
  left:0;
  width: 200px;          /* LC width */
  background-color: #108EE9;
}

</style>
  </head>
  <body>
    <div id="container">
      <div id="center" class="column"><p>i am here</p></div>
      <div id="left"><p>I am left</p></div>
    </div>
  </body>
</html>
2018年3月1日 22:37
編輯回答
夕顏

中間加一個(gè)padding.
padding = 左邊盒子寬度 + 間隔寬度

2017年3月26日 14:39
編輯回答
枕邊人

手機(jī)端的就用flex，grid布局，現(xiàn)在90%的都支持，簡(jiǎn)單實(shí)用；如果做的是響應(yīng)式的可以考慮圣杯布局，或者雙飛翼布局。

2018年5月23日 04:51