对于任何浏览器（跨浏览器），将 div 定位在中心和左右
Posted
技术标签:
【中文标题】对于任何浏览器（跨浏览器），将 div 定位在中心和左右【英文标题】：Positioning of divs in center and right and left for any browser(cross-browser) 【发布时间】：2019-03-18 05:45:15 【问题描述】：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
【问题讨论】：
“所有浏览器”是什么意思？有许多不同的方法可以解决您的问题，但是如果没有您想要支持的浏览器的信息，没有人可以给出一个好的答案。 :) 表示跨浏览器/任意浏览器。 【参考方案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>【讨论】：
【参考方案2】：这可以使用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>
【讨论】：
【参考方案3】：好的，据我了解您的问题，容器div-B 应始终居中，无论来自div-A odr div-B。我改变了两个主要的事情：
-
我将样式更新为 flexbox，到目前为止，它对浏览器的支持非常好。
将隐藏类从
display:block更改为visibility:hidden，因此空闲空间仍被阻止为div-B
为了更好的视觉理解，我在 .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>【讨论】：
【参考方案4】：使用 CSS Grid 并为所有可能的情况定义 grid-column 属性，使用父元素上的实用程序类。居中main，而不是divs。
下面这个 sn-p 应该可以工作，代码语法与 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/
【讨论】：
【参考方案5】：您可以使用 minmax() CSS 函数来固定宽度，并隐藏一个 div 以使中心 div 保持在页面中心使用 css 的 visibility : hidden 属性这只会将其隐藏在页面中，但会将其保留在 DOM 和因此，如果侧面的两个 div 中的任何一个在点击时被隐藏，则中心 div 不会受到影响
working code
<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;
【讨论】：
【参考方案6】：我已经为您的要求做了一个简单的方法，请检查下面的sn-p。希望它是你所要求的。
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>【讨论】：
谢谢。这不是我要找的。span> 【参考方案7】：您不能使用relative 定位使<div> 中的元素居中，因为这样，您正在设置您的UI 以将每个元素排列在前一个元素旁边。因此，我最终将使用absbolute 定位（如果您希望这些元素不滚动，请改用fixed）。
将元素左对齐：
#element
position: absolute;
left: 0;
将元素对齐到中心：
#element
position: absolute;
left: 50%;
transform: translateX(-50%);
右对齐元素：
#element
position: absolute;
right: 0;
为了使元素居中，我想出了一个奇怪但可行的解决方案：我将元素的 left 放在父元素的中心（通过设置 left: 50%）并水平平移元素的一半宽度（@ 987654330@)。请注意，这实际上是有效的，因为百分比在任何属性中都相对于父级，但trasform 是相对于元素本身的。
【讨论】：
【参考方案8】：您听说过Bootstrap Framework。我在这里给你一个例子，说明我将如何使用这个框架为你的需求做一个响应式（跨浏览器）布局。我唯一不能严格匹配的要求是下一个：
三个 div 面板：1) (div-B) 一个最大宽度 = 500px 和最小宽度 = 400px 的 div 应始终位于所有浏览器的中心。 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>【讨论】：
【参考方案9】：这里有很多关于如何自己编写 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>
【讨论】：
【参考方案10】：使用 flex 很容易..
.parentDiv
display: flex;
.childDiv
margin: auto;
【讨论】：
以上是关于对于任何浏览器（跨浏览器），将 div 定位在中心和左右的主要内容，如果未能解决你的问题，请参考以下文章
在 DIV 上实现跨浏览器兼容性的良好“背景大小：覆盖”后备/垫片/技巧？