我想将我的右侧面板对齐到最后。我需要在CSS中添加一些内容吗?
<div class="row flex">
<div class="col-md-5">
<div class="panel panel-default panel-no-border">
<div class="panel-body">
<p>
<strong>Smart XXXXX Europe Limited (XXXX Branch) </strong><br />
Address <br>
Address <br>
Address <br>
Address <br>
customer.relations@company.com<br>
www.comapny.com<br>
</p>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-2 text-right">
<div class="panel panel-default panel-no-border">
@*<div class="panel-heading">
<h4>Mr. John Ryan</h4>
</div>*@
<div class="panel-body">
<p>
<strong>Mr. John Ryan</strong><br />
36 Praed street <br>
XXXX, XXXXXX<br>
XXXXXX<br>
</p>
</div>
</div>
</div>
</div>
CSS:
.flex, .flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
}
.panel {
display: flex;
flex-direction:column;
align-content:stretch;
}
.panel-body {
display: flex;
flex-grow:1;
}
答案 0 :(得分:1)
您必须包装div,然后将padding-right= 0px;
添加到第二个div。
答案 1 :(得分:1)
`https://jsfiddle.net/nzLsedob/`
在这里查看 我希望这是你想要的答案。
答案 2 :(得分:1)
只需将justify-content: flex-end
添加到面板的父级:
<div class="col-md-5 col-md-offset-2 text-right your-class">
.your-class {
justify-content: flex-end;
}