Can I use CSS to realize the relative position of two elements?

as shown in figure



  1. the right and bottom margins of Button2 are fixed, and the position of Button1 is always on the left of 2
  2. when the page shrinks, Button2 always keeps the distance to the right, moves to the left, and there is always a minWidth, Button1 at 2 to the left
  3. Button2 when the page width is greater than a certain value, stretch according to the screen size, while keeping the distance between the left and right sides, Button1 is always on the left side of 2

if you don"t use JS to calculate the position, can you use pure CSS to set the relative position of one element relative to another sibling element?

Html css html5
Jun.03,2021

margin-right.

Dom:

``

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

``

Css:
``

   -sharpfather {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 100%;
      text-align: right;
    }
    -sharpfather div {
      height: 100px;
      display: inline-block;
    }
    .btn1 {
      background-color: red;
      width: 100px;
    }
    .btn2 {
      background-color: blue;
      min-width: 300px;
      width: 40%;
      margin-left: 10px;
    }
}``

Previous: What does the @ symbol mean when import is in the vue component?

Next: Questions about java IO streams?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu