[英]How to make both panels aligned regardless of height?
I have two panels: 我有两个面板:
They are aligned perfectly. 它们完美对齐。 Now, let us say I add text in panel 1 which changes it's height.
现在,让我们说我在面板1中添加文本来改变它的高度。
It is no longer aligned: 它不再对齐:
I'm not sure how to fix this or why it is happening. 我不确定如何解决这个或为什么会发生这种情况。 How can I keep both panels aligned regardless what I add to them?
无论我添加哪些面板,我如何保持两个面板对齐?
I created a JSFiddle to make it easy to edit: https://jsfiddle.net/8qafwy93/7/ 我创建了一个JSFiddle以便于编辑: https ://jsfiddle.net/8qafwy93/7/
HTML: HTML:
<div class="row">
<div class="panel">
<h1>Panel 1</h1>
<p>Remove this</p>
</div>
<div class="panel">
<h1>Panel 2</h1>
</div>
</div>
CSS: CSS:
body{
background: slategray;
}
.row{
margin-left: auto;
margin-right: auto;
}
.panel{
background: white;
width: 49%;
display: inline-block;
}
You can use flexboxes 您可以使用flexboxes
You add: 你添加:
.row{
display: flex;
justify-content: space-between;
}
This will turn your roll div into a flex contianer and with justify-content
you add some space between elements; 这会将你的roll div变成一个flex contianer,并且通过
justify-content
你可以在元素之间添加一些空格;
If you want to know more about flexboxes i recommend 如果你想了解更多关于我推荐的flexboxes的信息
Hope this helps :) 希望这可以帮助 :)
body{ background: slategray; } .row{ display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; } .panel{ background: white; width: 49%; display: inline-block; }
<div class="row"> <div class="panel"> <h1>Panel 1</h1> <p>Remove this</p> </div> <div class="panel"> <h1>Panel 2</h1> </div> </div>
Since you're using inline-block to horizontally align your elements, uou could add the following code to your panel rule: 由于您使用内联块来水平对齐元素,因此您可以将以下代码添加到面板规则中:
vertical-align: middle;
The vertical-align property allow you to specify the vertical alignment of inline inside there inline formatting context. vertical-align属性允许您在内联格式化上下文中指定内联的垂直对齐方式。
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.