鍍金池/ 問(wèn)答/HTML5  HTML/ 可否用 CSS 實(shí)現(xiàn)兩個(gè)元素的相對(duì)位置？

可否用 CSS 實(shí)現(xiàn)兩個(gè)元素的相對(duì)位置？

如圖：

圖片描述
圖片描述
圖片描述

  1. Button2 的右邊距和下邊距固定，Button1 的位置始終保持在 2 的左邊
  2. 在頁(yè)面縮小時(shí)，Button2 始終保持右邊的距離，向左邊移動(dòng)，并且有一個(gè) minWidth， Button1 始終在 2 左邊
  3. Button2 在頁(yè)面寬度大于某個(gè)值時(shí)，根據(jù)屏幕尺寸拉伸，同時(shí)保持左右邊距離，Button1 始終在 2 左邊

如果不用 JS 去計(jì)算位置，用純 CSS 可以實(shí)現(xiàn)這種一個(gè)元素相對(duì)于另一個(gè)同級(jí)元素的相對(duì)位置的設(shè)定嗎？

回答
編輯回答
久舊酒

margin-right ......

Dom:

``

<div id="father">
    <div class="btn1"></div>
    <div class="btn2"></div>
</div>

``

Css:
``

   #father {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 100%;
      text-align: right;
    }
    #father div {
      height: 100px;
      display: inline-block;
    }
    .btn1 {
      background-color: red;
      width: 100px;
    }
    .btn2 {
      background-color: blue;
      min-width: 300px;
      width: 40%;
      margin-left: 10px;
    }
}``
2018年8月26日 03:19