响应式更改 CSS 定位方法，仅针对一个轴？
Change CSS positioning method responsively, for only one axis?
希望我准备的这些图片能够充分说明我遇到的挑战。
在我正在处理的响应式 Bootstrap 布局中，有一个主要内容容器和下面排列的三个后续段落。每个段落下方都有一个号召性用语按钮。移动对齐看起来不错，因为它们都水平居中，在这样的垂直堆栈中：
但是，在桌面布局中，三个蓝色按钮会因为段落长度不同而被推到不同的高度。像这样：
为清楚起见，这是我想要的结果 - 按钮对齐以匹配最低位置的按钮：
我认为我无法通过相对于通用 div 定位按钮来解决此问题，因为该对象的位置将在移动布局中完全改变。
我想也许当浏览器 window 低于某个宽度时使用 display:none 隐藏按钮并用其他宽度替换它们可能是一个可行的解决方案，但似乎语义不好相同的链接在 HTML 中出现了两次。 （Google 会关心吗？）
我考虑的另一种方案是固定段落栏的高度divs，并使按钮位置相对于divs的底部，但这似乎违背了原则流畅的布局，当文本在不同的浏览器中以不同的字体呈现时，可能会引入新的问题。不能让段落文本被裁剪或重叠。
我是否偶然发现了一些棘手的事情，或者我只是没有意识到一个明显的解决方案？
On the Desktop
1) Set a min-height for all the containers for that paragraph in CSS
2) Set a height for the containers in CSS and make overflow:auto so it scrolls if it exceeds the height.(If you dont mind the scroll)
3) Write a javascript snippet to calculate the max height among them and set that height to the containers
您可以尝试为段落指定固定高度，并在较小的设备中将高度设置为自动，例如：
p{height:auto;} -->For mobile devices
p{height:200px;} -->For desktop
我在网上找到这个 post 来回答您的问题，请在此处查看 [http://jsbin.com/tunohe/1][1]
这是 HTMl、CSS & JavaScript 代码
.box2 > div {
background: #f7f7f7;
border:1px solid #ddd;
padding: 15px;
margin-bottom:10px;
}
@media (min-width:992px) {
.box,
.box2 > div {
padding-bottom: 75px
}
.box .button,
.box2 .button {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
}
.box2 h3:first-child {
margin-top: 0
}
}
/* ============== RESPONSIVE EQUAL HEIGHTS ========= */
/* Javascript-Equal-Height-Responsive-Rows https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows */
(function($){$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){$element=$(element);var element_height;var includePadding=($element.css('box-sizing')=='border-box')||($element.css('-moz-box-sizing')=='border-box');if(includePadding){element_height=$element.innerHeight();}else{element_height=$element.height();}
heights.push(element_height);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this;$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
row.equalHeight();}}
return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0;this.each(function(i,elem){var elem_offset=$(elem).offset().top;if(offset===0||elem_offset==offset){cols++;offset=elem_offset;}else{return false;}});return cols;};$.fn.responsiveEqualHeightGrid=function(){var _this=this;function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
$(window).bind('resize load',syncHeights);syncHeights();return this;};})(jQuery);
$(window).load(function() {
$('.box').responsiveEqualHeightGrid();
$('.box2 > div').responsiveEqualHeightGrid();
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="BSWP">
<meta name="author" content="Diane Frierson">
<link rel="icon" href="assets/img/favicon.ico">
<title>Bootstrap to Wordpress</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- FontAwesome Icons -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<link href="assets/css/mycustom.css" rel="stylesheet">
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<h2 class="text-center">Equal Height Columns</h2>
<div class="row">
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
</div>
<hr>
<h2 class="text-center">Equal Height Columns</h2>
<div class="row">
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
</div>
</div>
</body>
</html>
<!-- BOOTSTRAP CORE JAVASCRIPT
Place at the end of the document so the pages
load faster!
======================================== -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/function.js"></script>
<!-- TypeKit Fonts -->
<script src="//use.typekit.net/ujd2dvf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</body>
</html>
希望我准备的这些图片能够充分说明我遇到的挑战。
在我正在处理的响应式 Bootstrap 布局中，有一个主要内容容器和下面排列的三个后续段落。每个段落下方都有一个号召性用语按钮。移动对齐看起来不错，因为它们都水平居中，在这样的垂直堆栈中：
但是，在桌面布局中，三个蓝色按钮会因为段落长度不同而被推到不同的高度。像这样：
为清楚起见，这是我想要的结果 - 按钮对齐以匹配最低位置的按钮：
我认为我无法通过相对于通用 div 定位按钮来解决此问题，因为该对象的位置将在移动布局中完全改变。
我想也许当浏览器 window 低于某个宽度时使用 display:none 隐藏按钮并用其他宽度替换它们可能是一个可行的解决方案，但似乎语义不好相同的链接在 HTML 中出现了两次。 （Google 会关心吗？）
我考虑的另一种方案是固定段落栏的高度divs，并使按钮位置相对于divs的底部，但这似乎违背了原则流畅的布局，当文本在不同的浏览器中以不同的字体呈现时，可能会引入新的问题。不能让段落文本被裁剪或重叠。
我是否偶然发现了一些棘手的事情，或者我只是没有意识到一个明显的解决方案？
On the Desktop
1) Set a min-height for all the containers for that paragraph in CSS
2) Set a height for the containers in CSS and make overflow:auto so it scrolls if it exceeds the height.(If you dont mind the scroll)
3) Write a javascript snippet to calculate the max height among them and set that height to the containers
您可以尝试为段落指定固定高度，并在较小的设备中将高度设置为自动，例如：
p{height:auto;} -->For mobile devices
p{height:200px;} -->For desktop
我在网上找到这个 post 来回答您的问题，请在此处查看 [http://jsbin.com/tunohe/1][1]
这是 HTMl、CSS & JavaScript 代码
.box2 > div {
background: #f7f7f7;
border:1px solid #ddd;
padding: 15px;
margin-bottom:10px;
}
@media (min-width:992px) {
.box,
.box2 > div {
padding-bottom: 75px
}
.box .button,
.box2 .button {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
}
.box2 h3:first-child {
margin-top: 0
}
}
/* ============== RESPONSIVE EQUAL HEIGHTS ========= */
/* Javascript-Equal-Height-Responsive-Rows https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows */
(function($){$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){$element=$(element);var element_height;var includePadding=($element.css('box-sizing')=='border-box')||($element.css('-moz-box-sizing')=='border-box');if(includePadding){element_height=$element.innerHeight();}else{element_height=$element.height();}
heights.push(element_height);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this;$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
row.equalHeight();}}
return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0;this.each(function(i,elem){var elem_offset=$(elem).offset().top;if(offset===0||elem_offset==offset){cols++;offset=elem_offset;}else{return false;}});return cols;};$.fn.responsiveEqualHeightGrid=function(){var _this=this;function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
$(window).bind('resize load',syncHeights);syncHeights();return this;};})(jQuery);
$(window).load(function() {
$('.box').responsiveEqualHeightGrid();
$('.box2 > div').responsiveEqualHeightGrid();
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="BSWP">
<meta name="author" content="Diane Frierson">
<link rel="icon" href="assets/img/favicon.ico">
<title>Bootstrap to Wordpress</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- FontAwesome Icons -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<link href="assets/css/mycustom.css" rel="stylesheet">
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<h2 class="text-center">Equal Height Columns</h2>
<div class="row">
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
<div class="col-md-4 box">
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div>
</div>
<hr>
<h2 class="text-center">Equal Height Columns</h2>
<div class="row">
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive you personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
<div class="col-md-4 box2">
<div>
<h3 class="text-center">Newcomers Begin Here</h3>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry</p>
<p class="button">
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button></p>
</div></div>
</div>
</div>
</body>
</html>
<!-- BOOTSTRAP CORE JAVASCRIPT
Place at the end of the document so the pages
load faster!
======================================== -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/function.js"></script>
<!-- TypeKit Fonts -->
<script src="//use.typekit.net/ujd2dvf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</body>
</html>