所以我有一个HTML / CSS问题,我似乎无法弄清楚。我正在尝试按以下模式垂直对齐3个图像和文本:图像文本图像文本文本图像文本。我设法自己做,并且可以在我的13英寸MacBook上正常显示。但是,一旦我缩小窗口,一切都变得混乱了。所以,我想知道是否有人可以帮助我找到一种格式化的方法响应屏幕尺寸?
P.S。不过,我确实将其用于移动设备。
我的代码:
.checklogostyle {
vertical-align: middle;
margin-top: 10px;
padding-left:13%;
float:left;
}
@media (max-width:768px) {
.checklogostyle {
vertical-align: middle;
margin-top: 30px;
margin-left:20px;
margin-right: 20px;
float:left;
}
}
.brandstext {
padding-left:12%;
float:left;
text-align:left;
}
@media (max-width:768px) {
.brandstext {
margin-left:0px;
margin-top:20px;
float:center;
text-align:left;
}
}
.brandstextlast {
margin-left:20px;
float:left;
text-align:left;
}
@media (max-width:768px) {
.brandstextlast {
margin-left:20px;
margin-top:20px;
float:left;
text-align:left;
}
}
<div class="checklogostyle">
<img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
<span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
</div>
<div class="checklogostyle">
<img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
<span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
</div>
<div class="checklogostyle">
<img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
<span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
</div>
我猜想我需要将内容包装到某种类型的容器/包装器中,但是我似乎无法弄清楚。我们将不胜感激任何帮助,特别是如果有人解释逻辑,那么将来我将可以做其他事情!
谢谢!
答案 0 :(得分:0)
您可以使用Flexbox。我也没有对您的HTML进行任何更改。
更新:检查桌面版本的全屏预览,使用680px的媒体查询,可以根据需要进行更改。
.container-row {
display: flex;
max-width:1100px;
justify-content: space-between;
margin: auto;
}
.column {
display: flex;
}
@media screen and (max-width:680px) {
.container-row {
flex-direction: column;
}
}
.brandstext {
padding-left: 10px;
}
<div class="container-row">
<div class="column">
<div class="checklogostyle">
<img src="//placehold.it/60x60">
</div>
<div class="brandstext">
<span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
</div>
</div>
<div class="column">
<div class="checklogostyle">
<img src="//placehold.it/60x60">
</div>
<div class="brandstext">
<span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
</div>
</div>
<div class="column">
<div class="checklogostyle">
<img src="//placehold.it/60x60">
</div>
<div class="brandstext">
<span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
</div>
</div>
</div>
答案 1 :(得分:0)
使用display: flex;
,您可以轻松进行响应式设计。对于大屏幕使用flex-direction: row;
,对于小屏幕使用flex-direction: column;
。
.flex-wrapper {
display:flex;
flex-direction: row;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
}
.flex-element {
display:flex;
flex-direction: row;
}
.brandstextlast {
margin-left:60px;
}
.checklogostyle img {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.checklogostyle {
position: relative;
}
@media (max-width:768px) {
.flex-wrapper {
flex-direction: column;
align-items: center;
}
.flex-element {
width: 200px;
}
}
<div class="flex-wrapper">
<div class="flex-element">
<div class="checklogostyle">
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
</div>
<div class="brandstextlast">
<span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
</div>
</div>
<div class="flex-element">
<div class="checklogostyle">
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
</div>
<div class="brandstextlast">
<span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
</div>
</div>
<div class="flex-element">
<div class="checklogostyle">
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
</div>
<div class="brandstextlast">
<span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
</div>
</div>
</div>