CSS无法在iOS / Safari上并排显示元素

Question

我不太擅长CSS。那个……加上我花了将近一个小时的时间来尝试使用<table>实现在一分钟内可以完成的事情……但如今，用tables样式化HTML被认为是不好的。好。因此，我正在努力开发CSS ...

所以可以提供任何帮助。

我正在尝试显示此：

所以我的html变成了这个（列表中有多个项目）：

<ul class="utl">
 <li>
    <a href="#"><img src="#" class="utlimg"></a>
    <a href="#"><h2>HeaderTitleGoesHere</h2></a>
    <p>Small description text goes here.</p>
  </li>
</ul>

而CSS是：

* {
    word-wrap: break-word;
}
.utl{
    list-style: none outside none;
    padding: 1em 4px 4em 4px;
    margin: 10px 0px 30px 0px;
}
.utl li {
    padding: 2px 0;
    margin: 0.8em 0 1.8em 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.utl h2{
    margin: 0 0 0.4em 0;
    padding: 0;
}
.utl p{
    margin: 0.4em 0;
    padding: 0;
}

.utlimg{
    float: left;
    margin: 0px 1em 1em 0px;
    max-width: 50px;
    max-height: 50px;
}

当我在Chrome的开发者控制台中尝试时，此方法有些起作用（尽管文本似乎在左侧图像下方溢出：]

但是当我在iPhone上加载它时，它看起来完全是错误的（在Safari中：

所以我在那里想念什么？

Answer 1

这里是代码。希望对您有帮助。如果有任何更改，请通知我。