gpt4 book ai didi

css - 在响应式设计中垂直对齐 2 个 div

转载 作者:行者123 更新时间:2023-11-28 15:20:10 28 4
gpt4 key购买 nike

我有 2 张纵向堆叠但横向相邻的卡片。我想让两张卡片在横向上彼此垂直对齐。即,第一张卡片的文字应与图像的中间对齐。我尝试了 flex 选项,但这破坏了响应式设计。帮助不大。谢谢。

<div class="land6">
<header>
<h4>T++++</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="/Thumbs.jpg" width="100%" />
</div>
</div>

CSS:

@media only screen and (orientation:landscape){
.land6{width:49%}}

最佳答案

如果您不想使用 flexbox ,那么您将需要另一种方法:

@media only screen and (orientation:portrait) {

.land6 {
display: block;
width: 100%;
}
}

@media only screen and (orientation:landscape) {

.wrapper {
white-space: nowrap;
}

.land6 {
display: inline-block;
vertical-align: middle;
width: 50%;
}
}



.land6 img {
width: 100%;
}
<div class=wrapper>

<div class="land6">
<header>
<h4>Some header</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />
</div>
</div>
<div>

关于css - 在响应式设计中垂直对齐 2 个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36314345/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com