Question

所以我有一个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>

我猜想我需要将内容包装到某种类型的容器/包装器中，但是我似乎无法弄清楚。我们将不胜感激任何帮助，特别是如果有人解释逻辑，那么将来我将可以做其他事情！

谢谢！

Image example of what I've achieved

Answer 1

您可以使用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>

Answer 2

使用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>

与响应水平对齐3张图像和3个文本列表

2 个答案: