需要具有不同宽度的自适应等高div标签
[英]Need responsive equal height div tags with different width
问题描述
How we can get responsive equal height div tag with different width? 
如何获得具有不同宽度的自适应等高div标签？ For example if screen of 100% I need 80% to be one div and remaining other div but their heights should be same. 例如，如果屏幕为100％，则我需要80％成为一个div，其余的则为其他div，但它们的高度应相同。 I have tried so many plugins but no use. 我尝试了很多插件，但没有用。 I am using bootstrap4 now.? 我现在正在使用bootstrap4。
Please find the sample html file that i am using. 请找到我正在使用的示例html文件。
<!DOCTYPE html> <html lang="en"> <head> <title>equal height</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-md-12"> <div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen"> <h2>equal height</h2> <h2>equal height</h2> <h2>equal height</h2> </div> <div class="col-md-3 col-sm-12 col-lg-3 col-xs-12" style="background-color:lightyellow"> <h2>equal height</h2> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2018-11-21 09:39:38
On parent element add display: flex , and align-items: stretch . 在父元素上添加display: flex和align-items: stretch 。
(...)
<div class="row">
<div class="col-md-12" style="display: flex; align-items: stretch;">
<div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen">
<h2>equal height</h2>
(...)
Downside of this approach is that you'll need to use media queries to put one child below another on smaller screens (with display: flex they'll always be one besides the other) 这种方法的缺点是，您需要使用媒体查询在一个较小的屏幕上将一个孩子放在另一个孩子的下面（ display: flex它们将永远是另一个孩子）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.