Расположение 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>

Вот ссылка на стек: https://stackblitz.com/edit/angular-tpj35u?file=src%2Fapp%2Fapp.component.html

Answer 1

Легко с flex ..

.parentDiv{
    display: flex;
}
.childDiv{
    margin: auto;
}

Answer 2

Вы не можете центрировать элемент в <div>, используя relative позиционирование, так как вы настраиваете свой пользовательский интерфейс, чтобы расположить каждый элемент рядом с предыдущим.Поэтому я в итоге буду использовать absbolute позиционирование (вместо этого используйте fixed, если хотите, чтобы эти элементы не прокручивались).

1. Чтобы выровнять элемент по левому краю:

   #element {
       position: absolute;
       left: 0;
   }
   

2. Чтобы выровнять элемент по центру:

   #element {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
   }
   

3. Чтобы выровнять элемент вправо:

   #element {
       position: absolute;
       right: 0;
   }
   

Для центрирования элементов я нашел странное, но рабочее решение: я помещаю элемент left в центр родительского элемента (установив left: 50%) и перевожуэлемент горизонтально его полуширины (transform: translateX(-50%)).Обратите внимание, что это на самом деле работает, так как проценты по отношению к родителю в любом свойстве, кроме trasform, где они относятся к самому элементу.

Answer 3

Множество хороших ответов здесь о том, как сделать CSS самостоятельно, но сложные таблицы стилей фрейминга раздражают в обслуживании.Подумайте об использовании фреймворка.

Skeleton будет моим первым выбором для вашего случая использования.

<link rel="stylesheet" href="http://getskeleton.com/dist/css/normalize.css">
<link rel="stylesheet" href="http://getskeleton.com/dist/css/skeleton.css">
<!-- .u-pull-* will float content left/right -->
<button class="u-pull-left">Button A</button>
<button class="u-pull-right">Button C</button>
<!-- .container is a centered responsive wrapper -->
<div class="container">
  <div class="row">
    <div class="four columns">Panel A</div>
    <div class="four columns">Panel B</div>
    <div class="four columns">Panel C</div>
  </div>
</div>

Answer 4

Вы можете зафиксировать ширину, используя CSS-функцию minmax(), и чтобы скрыть div таким образом, чтобы центр div остался в центре страницы, используйте visibility : hidden свойство css, которое будет только скрывать его от страницы, но сохранит его в DOM итаким образом, центральный div не будет затронут, если любой из двух div'ов на стороне будет скрыт при нажатии

рабочий код

<div id="container">
    <div (click)="visibility = !visibility" [ngClass]="{'hide' : visibility}">
     <select style="width :-webkit-fill-available;"></select>
      at most 300 pixels
    </div>
    <div>20px</div> //separator
    <div>
    <div style="position:absolute">
      Item with 400 to max 500px width
    </div>
  </div>
    <div>20px</div>    //separator
    <div  (click)="visibility1 = !visibility1" [ngClass]="{'hide' : visibility}">
        at most 300 pixels.
    </div>
  </div>

css

#container {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 20px minmax(400px, 500px) 20px minmax(200px, 300px);
  box-sizing: border-box;
  height: 200px;
  background-color: #8cffa0;
  width: 100%;
}

#container > div {
  background-color: #8ca0ff;
  border: 1px dotted red;
 }
 .hide {
   visibility: hidden;
 }

Answer 5

Это можно сделать с помощью flex:

<!DOCTYPE html>
<html>
<head>
  <style>
      .container {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex: 1;
          overflow: hidden;
      }

      .classA {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 200px;
          max-width: 300px;
          height: 200px;
          width: 300px;
          background-color: red;
      }
      .classB {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex: 1;
          min-width: 400px;
          max-width: 500px;
          width: 500px;
          height: 200px;
          margin-left: 20px;
          margin-right: 20px;
          background-color: yellow;
      } 
      .classC {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 200px;
          max-width: 300px;
          height: 200px;
          width: 300px;
          background-color: blue;
      } 
      </style>
</head>
<body>
  <div class="container">
    <div class="classA">A</div>
    <div class="classB">B</div>
    <div class="classC">C</div>
  </div>
</body>
</html>

Answer 6

Используйте CSS Grid и определите свойство grid-column для всех возможных случаев, используя служебные классы для родительского элемента.Центрируйте main, а не div s.Этот фрагмент кода ниже должен работать, синтаксис кода немного отличается от версии Node.js.Смотрите полную страницу.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showA = false;
    $scope.showB = false;
    $scope.showHide = function(val) {
      if(val === 'A'){
        this.showA = !this.showA;
      }
      else if(val === 'C'){
        this.showC = !this.showC;
      }
    };
});

p {
  font-family: Lato;
}
div.panel.show{
  display: block;
}

div.panel.hide{
    display: none;
}
header{
  height:40px;
}
div.pull-left{
  float:left;
  width:100px;
    display: block;
    color: red;
  text-align: center;
  border:1px solid #ccc;
}

div.pull-right{
  float:right;
  width:100px;
  text-align: center;
  border:1px solid #ccc;
}
main{
  display: table;
  margin: auto;
}
div.row{
  width:100%;
  float: left;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(400px, 500px) minmax(200px, 300px);
  grid-gap: 20px;
}
.div-A {
  display: none;
  grid-column: 1 / span 1;
  background-color: blue;
}
.div-B {
  display: block;
  grid-column: 1 / span 3;
  background-color: red;
}
.div-C {
  display: none;
  grid-column: 3 / span 1;
  background-color: yellow;
}
.showA .div-A {
  display: block;
}
.showA .div-B {
  grid-column: 2 / span 2;
}
.showC .div-B {
  grid-column: 1 / span 2;
}
.showA.showC .div-B {
  grid-column: 2 / span 1;
}
.div-C {
  display: none;
}
.showC .div-C {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <hello name="{{ name }}"></hello> -->
<div ng-app="myApp" ng-controller="myCtrl">
<header>
<div class="pull-left" ng-click="showHide('A')">button-div-A</div>
<div class="pull-right" ng-click="showHide('C')">button-div-C</div>
</header>

<main>
<div class="row" ng-class="{'showA': showA, 'showC': showC }">
  <div class="panel div-A">Panel A </div>  
  <div class="panel div-B">Panel B </div>  
  <div class="panel div-C">Panel C </div>
</div>
</main>
</div>

Возможное решение

https://stackblitz.com/edit/angular-4jdpca - изменить цвета по своему желанию.

Ссылки

https://css -tricks.com / snippets / css / complete-guide-grid /

Answer 7

Хорошо, насколько я понял ваша проблема, контейнер div-B всегда должен быть центрирован, независимо от div-A odr div-B.Я изменяю две основные вещи:

1. Я обновил стили до flexbox, у которого пока очень хорошая поддержка браузера.
2. Изменил класс скрытия с display:block на visibility:hidden,поэтому свободное пространство все еще заблокировано на div-B
3. Для лучшего визуального понимания я добавил красную рамку к контейнеру .panel

Изучите пример в полноэкранном режиме,чтобы увидеть, что .div-B гибкий

$(".pull-left").click(function() {
  $(".div-A").toggleClass("hide")
});

$(".pull-right").click(function() {
  $(".div-C").toggleClass("hide")
});

p {
  font-family: Lato;
}

.show {
  display: block;
}

.hide {
  visibility: hidden;
}

header {
  height: 40px;
}

div.pull-left {
  float: left;
  width: 100px;
  display: block;
  color: red;
  text-align: center;
  border: 1px solid #ccc;
}

div.pull-right {
  float: right;
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row .panel {
  border: 1px solid red;
  flex: 0 0 200px;
}

.row .panel.div-B {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <hello name="{{ name }}"></hello> -->
<header>
  <div class="pull-left" (click)='showHide("A")'>button-div-A</div>
  <div class="pull-right" (click)='showHide("C")'>button-div-C</div>
</header>

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

Answer 8

Слышали ли вы о Bootstrap Framework .Я приведу здесь пример того, как я буду делать адаптивный (кроссбраузерный) макет для ваших требований с помощью этой платформы.Единственное требование, которому я не могу строго соответствовать, следующее:

Три панели div: 1) (div-B) один div с max-width = 500px и min-width = 400px всегда должен быть в центре всех браузеров. 2) (div-A) один div должен показываться и скрываться слева от (div-B) с min-width = 200px и max-width = 300px; 3) (div-C) один div должен показываться и скрываться справа от (div-B) с min-width = 200px и max-width = 300px;

Система сетки столбцов Bootstrap (она делит ширину экрана на 12 столбцов) автоматически управляет шириной столбцов, чтобы сайт реагировал на различные типы экранов, поэтому я не знаю, будет лиможет соответствовать вашим максимальным / минимальным значениям ширины пикселей, но вы можете назначить процент от общего количества столбцов для трех элементов, которые у вас есть для аналогичного подхода.В остальном все хорошо.Вы можете проверить следующий пример.Я надеюсь, что это поможет вам.

$(document).ready(function()
{
    $("#btnToggleA").click(function()
    {
        $(".div-A").slideToggle();
    });
    
    $("#btnToggleC").click(function()
    {
        $(".div-C").slideToggle();
    });
});

.margin-20px
{
    margin: 0px 20px;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- Wrapper for the Boostrap layout -->
<div class="container-fluid">

<header class="row">
  <div class="col-12 p-0">
    <button id="btnToggleA" class="float-left btn btn-sm btn-primary">Toogle Div-A</button>
    <button id="btnToggleC" class="float-right btn btn-sm btn-primary">Toogle Div-C</button>
  </div>
</header>

<!-- Class "mt-3" just adds some margin-top for good looking but can be removed -->
<!-- Classes "bg-*" adds background colors, not needed but helps to visualize elements -->

<main class="row mt-3">

  <div class="col-3 text-center p-0">
    <div class="div-A bg-info">Panel A</div>
  </div>

  <div class="col-6 text-center p-0">
    <div class="div-B bg-warning margin-20px">
      Panel B
    </div>
  </div>

  <div class="col-3 text-center p-0">
    <div class="div-C bg-info">
      Panel C
    </div>
  </div>

</main>

</div>

Answer 9

Я сделал простой способ вашего запроса, пожалуйста, проверьте фрагмент ниже.Надеюсь, это так, как вы просили.

var divchecker = 0;

$('.pull-left').click(function() {
    //you are hiding the Div A now
    divchecker = divchecker+1;
    $('.div-A').hide();
    $('.pull-left2').show();
    $('.pull-left').hide();
    $('.gridsection').css('grid-template-columns', '70% auto');
    if (divchecker == 2){
      $('.gridsection').css('grid-template-columns', '100%');
    }
});
$('.pull-right').click(function() {
    //you are hiding the Div C now
    divchecker = divchecker+1;
    $('.div-C').hide();
    $('.pull-right2').show();
    $('.pull-right').hide();
    $('.gridsection').css('grid-template-columns', 'auto 70%');
    if (divchecker == 2){
      $('.gridsection').css('grid-template-columns', '100%');
    }
});

$('.pull-left2').click(function() {
    //you are showing the Div A now
    divchecker = divchecker-1;
    $('.div-A').show();
    $('.pull-left2').hide();
    $('.pull-left').show();
    $('.gridsection').css('grid-template-columns', 'auto 60% auto');
    if (divchecker == 2){
      $('.gridsection').css('grid-template-columns', '100%');
    }
});
$('.pull-right2').click(function() {
    //you are showing the Div C now
    divchecker = divchecker-1;
    $('.div-C').show();
    $('.pull-right2').hide();
    $('.pull-right').show();
    $('.gridsection').css('grid-template-columns', 'auto 60% auto');
    if (divchecker == 2){
      $('.gridsection').css('grid-template-columns', '100%');
    }
});

main {
  border: 1px solid;
  display: grid;
  grid-template-columns: auto 60% auto;
  grid-gap: 20px;
}

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

header{
  height:40px;
}
div.pull-left,div.pull-left2{
  float:left;
  width:100px;
    display: block;
    color: red;
  text-align: center;
  border:1px solid #ccc;
  background-color:yellow;
  cursor: pointer;
  font-weight:bold;
  border-radius: 5px;
}

div.pull-right,div.pull-right2{
  float:right;
  width:100px;
  text-align: center;
  border:1px solid #ccc;
  background-color:yellow;
  font-weight:bold;
  border-radius: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="pull-left">Hide-div-A</div>
  <div class="pull-left2" style="display:none;">Show-div-A</div>
  <div class="pull-right">Hide-div-C</div>
  <div class="pull-right2" style="display:none;">Show-div-C</div>
</header>

<main class="gridsection">
  <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>

Answer 10

Вы можете использовать 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>