如何阻止 div 在 Safari 中重叠答案

【问题标题】：How to stop divs from overlapping in safari如何阻止 div 在 Safari 中重叠
【发布时间】：2018-12-28 20:13:56
【问题描述】：

我有一个带有文本的表格，旁边是放在弹性行中的图像。

当我使窗口水平变窄时，文本会出现在图像“后面”，而不是包装并保留在 div 中。

在 chrome 和 mozilla 中一切都很好，问题只出现在 Safari 中。

我尝试在图像上使用分词、溢出换行、显示块，但无济于事。

这是我的代码：https://codepen.io/matteocarpi/pen/dwzjrb?editors=1100

    .show-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      // margin-bottom: 3rem;
    }
    .expectations {
      text-align: right;
      padding-right: 0.5em;
      vertical-align: baseline;
    }
    .statement {
      vertical-align: bottom;
    }
    .offer {
      padding-left: 0.5em;
    }
    .table-wrap {
      display: flex;
      flex-direction: row;
      padding: 0 2em;
    }
    .offer {
      margin-top: 3rem;
      margin-left: 2rem;
    }
    td {
      vertical-align: baseline;
      // min-width: 540px;
    }
    tr {
      padding: 0;
      margin: 0;
    }
    td > p {
      font-size: 15px;
      font-weight: 400;
      margin: 0.4rem 0;
      word-break: break-all;
      hyphens: auto;
    }
    
    .img-show-wrap {
      display: block;
    }
    .img-show{
      margin-top: -3rem;
      margin-right: 3rem;
      width: 30rem;
      border: solid 3px;
    }

 <div class="show-wrapper">
      <div class="table-wrap">
        <div>
          <table>
            <tbody>
              <tr>
                <td class="expectations"><h1> {{ page.expectation_title_en 
    }} </h1></td>
          </tr>

          <tr>
            <td class="expectations"><p class="statement">{{ page.expectation_1_en | markdownify }}</p></td>
          </tr>

          <tr>
            <td class="expectations"><p class="statement">{{ page.expectation_2_en | markdownify }}</p></td>
          </tr>

          <tr>
            <td class="expectations"><p>{{ page.expectation_3_en | markdownify }}</p></td>
          </tr>

        </tbody>
      </table>

    </div>

    <div>
      <table class="offer">
        <tbody>
          <tr>
            <td class="statement"><h1>{{ page.offer_title_en }}</h1></td>
          </tr>

          <tr>
            <td class="statement"><p>{{ page.offer_1_en | markdownify }}</p></td>
          </tr>

          <tr>
            <td class="statement"><p >{{ page.offer_2_en | markdownify }}</p></td>
          </tr>

          <tr>
            <td class="statement"><p >{{ page.offer_3_en | markdownify }}</p></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
    <div class="img-show-wrap">
      <img class="img-show" src="https://source.unsplash.com/random" alt="">
    </div>
  </div>

这是实际页面：https://matteocarpi.github.io/crdc/en/the-show

我希望文本换行并且永远不会与图像重叠（因为它在 codepen 的 sn-p 上运行良好，但在 safari 中的实际页面上运行良好）

提前感谢您的帮助！

马特奥

【问题讨论】：

注意：你的codepen演示是空的...
在表格的文本单元格中尝试style="word-break:break-word;"
谢谢@DavidDeprost，我改了，现在应该可以在线了
@Smitty-Werben-Jager-Manjenson，感谢您的评论，不走运
你真的需要这些桌子吗？

标签： css html

【解决方案1】：

正如@DaFois 评论的那样，删除表格布局并在弹性框中使用松散的段落就足够了。

这里是新代码：

.show-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
}
.expect-offer-wrap {
  display: flex;
  flex-direction: row;
}
.expectation {
  text-align: right;
  padding-right: 0.5em;
}
.offer {
  padding-left: 0.5em;
  margin-top: 3rem;
  margin-left: 2rem;
}

<div class="show-wrapper">

  <div class="expect-offer-wrap">

    <div class="expectation">
      <h1> {{ page.expectation_title_en }} </h1>

      <p>{{ page.expectation_1_en | markdownify }}</p>

      <p>{{ page.expectation_2_en | markdownify }}</p>

      <p>{{ page.expectation_3_en | markdownify }}</p>
    </div>

    <div class="offer">
      <h1>{{ page.offer_title_en }}</h1>

      <p>{{ page.offer_1_en | markdownify }}</p>

      <p >{{ page.offer_2_en | markdownify }}</p>

      <p >{{ page.offer_3_en | markdownify }}</p>
    </div>

  </div>


    <div class="img-show-wrap">
      <img class="img-show" src="{{ page.image | relative_url }}" alt="">
    </div></div>

</div>

谢谢！

【讨论】：