使用 CSS 定位这些元素以获得最佳响应式布局的最佳方法是什么？答案

【问题标题】：What is the best way to position these elements with CSS for the best responsive layout?使用 CSS 定位这些元素以获得最佳响应式布局的最佳方法是什么？
【发布时间】：2017-11-29 16:40:04
【问题描述】：

我正在创建一个网站，并且有一个部分我希望在其中实施这种设计：

目前，语音气泡是设置为背景图像的 svg 图像到它们自己的各个 div，语音气泡内的元素嵌套在语音气泡父 div 中。更改浏览器宽度时会出现问题 - 文本不会留在气泡内。

将此设计转变为仅包含 html 和 CSS 的响应式代码的最佳方法是什么？

这是目前的html代码：

<!-- Reviews -->
  <section id="reviews">
    <h2>Reviews</h2>
    <section class="visitor-review-1">
      <div class="review-1">
        <img id="user-image-1" src="media/profile-picture-1.png">
        <div id=visitor-comment-1>
          <p>Make sure you visit Santorini when you go to Greece. Its magical! An island that is a volcano, what could be dreamier? Make sure you try the local naturally sweet red wine, sweet tomatoes and lava.
          </p>
          <p>
            <strong><br>Amy Santiago</strong><br>Birmingham, UK
          </p>
        </div>
      </div>
    </section>
    <section class="visitor-review-2">
      <div class="review-2">
        <img id="user-image-2" src="media/profile-picture-2.png">
        <div id=visitor-comment-2>
          <p>We went to a restaurant with a beautiful terrace called Elinikon and had the most amazing view. Not only the sunset but before and after the sky remains beautiful colours! 100% must see when in Santorini.
          </p>
          <p>
            <strong><br>Dave William</strong><br>London, UK
          </p>
        </div>
      </div>
    </section>
  </section>

和 CSS：

#reviews {
  padding: 5rem 8rem 5rem 8rem;
  height: 100px;
}

.visitor-review-1 {
  background-image: url(media/speech-bubble-left_1.svg);
  background-repeat: no-repeat;
  background-size: 30rem;
  height: 350px;
  margin-top: 2.9rem;
}

.visitor-review-2 {
  background-image: url(media/speech-bubble-right.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 30rem;
  height: 350px;
  position: relative;
  top: -9rem;
}

.review-1 {
    width: 40%;
    position: absolute;
}

.review-2 {
    width: 50%;
    margin-left: 52%;
    position: absolute;
}

#user-image-1 {
    width: 110px;
    position: relative;
    left: 180px;
    top: 26px;
}

#visitor-comment-1 {
    font-family: 'Lato', sans-serif;
    padding: 2rem 4rem 0rem 3rem;
    color: rgba(16, 37, 89, 0.78);
    text-align: center;
    position: relative;
}

#user-image-2 {
    width: 110px;
    position: relative;
    left: 180px;
    top: 26px;
}

#visitor-comment-2 {
    font-family: 'Lato', sans-serif;
    padding: 2rem 4rem 0rem 3rem;
    color: rgba(16, 37, 89, 0.78);
    text-align: center;
    position: relative;
}

【问题讨论】：

您是否尝试过将 word-wrap: break-word 放入包含在语音气泡 div 中的文本类中？

标签： html css image svg layout

【解决方案1】：

你可以使用@media标签告诉你的代码如果屏幕的最大宽度是某个尺寸应该做什么，例如：

@media only screen and (max-width: 425px) {
   .review-1 {
      width: 550%;
      position: absolute;
}
/*And keep filling in what you want changed at screensizes here*/
}

【讨论】：