html - Mailchimp 中的自定义代码有问题

Question

我正在尝试设计一个比 Mailchimp 提供给我的更好的列表，但由于某种原因，移动版本的显示方式不正确。我对 CSS 很陌生，并且在旅途中学习。

每行都有一个带有文本的图像。图像应该在左侧并在 div 内居中。文本应该在右侧，靠近图像，与左侧对齐。似乎在移动版本上它以不同的方式显示浮动的位置，但我不知道为什么。

请参阅下面的代码和我的屏幕截图。

<style>
/* Create two columns that floats next to each other */
.centerimg {
  display: flex !important;
  margin: auto !important;
  width: 90px !important;
}

.columnleft {
  float: left !important;
  display: flex !important;
  width: 25% !important;
}

.columnright {
  float: right !important;
  width: 75% !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  height: 90px !important;
}

/* Clear floats after the columns */
.row:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

</style> 

<div class="row">
  <div class="columnleft mcnTextContent" style="">
  <img class="centerimg" src="https://mcusercontent.com/f172f17ce3def6b2a9ef2797a/images/0c925dfe-88bc-8190-2fa1-6a1f34f0cee9.png">
  </div>
  <div class="columnright mcnTextContent" style=""><strong>Optimale agendaplanning, want jij bepaalt hoeveel opdrachten je per week wilt uitvoeren.
</strong></div>
</div>

<div class="row">
  <div class="columnleft mcnTextContent" style="">
  <img class="centerimg" src="https://mcusercontent.com/f172f17ce3def6b2a9ef2797a/images/448d22c6-4998-10a1-42fc-9cbe4161a80f.png">
  </div>
  <div class="columnright mcnTextContent" style=""><strong>Geen duur kantoor nodig, want werken kan vanuit huis.
</strong></div>
</div>

<div class="row">
  <div class="columnleft mcnTextContent" style="">
  <img class="centerimg" src="https://mcusercontent.com/f172f17ce3def6b2a9ef2797a/images/1286401a-bd71-f6ed-f718-e611b0abac20.png">
  </div>
  <div class="columnright mcnTextContent" style=""><strong>Profiteer mee van de bekendheid van NTS!
</strong></div>
</div>

<div class="row">
  <div class="columnleft mcnTextContent" style="">
  <img class="centerimg" src="https://mcusercontent.com/f172f17ce3def6b2a9ef2797a/images/7ddbf0fb-2e19-ee86-26c7-37293342d44a.png">
  </div>
  <div class="columnright mcnTextContent" style=""><strong>Eenvoudige uitbreiding van jouw taxatieopdrachten. 
</strong></div>
</div>

<div class="row">
  <div class="columnleft mcnTextContent" style="">
  <img class="centerimg" src="https://mcusercontent.com/f172f17ce3def6b2a9ef2797a/images/06bb7013-8109-b0b7-6962-848bbb54ed55.png">
  </div>
  <div class="columnright mcnTextContent" style=""><strong>Gegarandeerde uitbetaling, dus geen debiteurenrisico!
</strong></div>
</div>

这是列表在移动设备和桌面上的外观，这也是它现在在桌面上的外观：

这是它在移动设备上的外观：

标签： htmlcssmailchimp