Question

我在一张可弯曲的行中的一张图片旁边有一张桌子，上面有文字。

当我将窗口水平缩小时，文本位于图像的“后面”，而不是环绕并保留在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的代码段中效果很好，但在Safari的实际页面中效果不佳）

在此先感谢您的帮助！

Matteo

Answer 1

正如@DaFois所说，足以删除表布局并在flexbox中使用松散的段落。

这里是新代码：

.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>

谢谢！

如何阻止div在野生动物园中重叠

1 个答案: