html - 为任何浏览器(跨浏览器)在中心和左右定位 div

Question

Three div panels:-
1) (div-B) one div with max-width = 500px and min-width=400px should always on 
    the center of all browsers.
2) (div-A) one div should show and hide on the left of (div-B) having min-width 
   = 200px and max-width= 300px;
3) (div-C) one div should show and hide on the right of (div-B) having min-width 
   = 200px and max-width= 300px;

div-A 和 div-C 的显示和隐藏应该以这样的方式进行，它不应将 div-B 从其位置移动，但是，它可以达到其可用的最大宽度和最小宽度。 div-B 应始终位于所有浏览器的中心。

页面布局:-

Header
<--Left button here                                       right button here-->
to open div-A panel                                       to open div-c panel
(basically a dropdown)                                  (basically a dropdown)


         Left Panel <---20px---> Center Panel <---20px---> Right Panel   
         (div-A)                  (div-B)                     (div-C)    

1) (div-A && div-B), (div-B && div-C) having margin 20px in between always.
   div-A should grow towards left and div-c should grow towards right relative to div-B(min-width and 
   max-width availability).
2) div-B should not move to right or left when div-A and div-C should hide. 
 But div-B should grow towards its left or right keeping div-B fixed to 
  center of browser window and tries to achieve its max-width(keeping center 
 axis fixed) if space available towards right or left.

<header>
//show hide button for div-A
<div class="div-A-button">Dropdown button A</div>
//show hide button for div-C
<div class="div-C-button">Dropdown button C</div>
</header>

<main>
<div class="panel div-A">Panel A </div>  //show and hide using div-A-button
<div class="panel div-B">Panel B </div>  //fixed always show
<div class="panel div-C">Panel C </div>  //show and hide using div-C-button
</main>

这是 stackblitz 链接:https://stackblitz.com/edit/angular-tpj35u?file=src%2Fapp%2Fapp.component.html

Answer 1

您可以使用 CSS 网格。我想我已经理解你的布局了。让我知道下面的例子是否正确。

main {
  border: 1px solid;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(400px, 500px) minmax(200px, 300px);
  grid-gap: 20px;
  justify-content: center;
}

main>div {
  background: yellow;
  text-align: center;
  padding: 1em;
}

.div-B {
  grid-column: 2;
}

<main>
  <div class="panel div-A">Panel A </div>
  <div class="panel div-B">Panel B </div>
  <div class="panel div-C">Panel C </div>
</main>