浮动图像不能同时工作

Question

我遇到了文本在图像周围浮动的问题。请参阅我的小提琴。

如果调整窗口大小以检查响应能力（我在 JSFiddle 中使用了内部样式，以便在浏览器上进行测试更容易），读者会注意到 左侧 div 上的文本很好地漂浮在图像周围，但是在 右侧 div 上标题为施工落后，即两侧不同时漂浮，我确实希望它们同时漂浮。

这也是截图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Agency</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="main">
    <img class="logo" src="./assets/images/logo.png" alt="logo">
    <h1>We are a <span>Creative</span> <br/> Design Agency</h1>
    <div class="left card"><img class="tile-image" src="./assets/images/beautiful.jpg" alt="hand and flower in water">
      <h2 class="card-title">Beauty</h2>
      <p class="card-text">We strive to create the most beautiful websites for all your needs. Working closely with you
        to
        design and
        develop an amazing website for your business.</p>
    </div>

    <div class="right card"><img class="tile-image" src="./assets/images/construction.jpg" alt="metal structure">
      <h2 class="card-title">Beauty</h2>
      <p class="card-text">Built by our team of professional developers, we ensure the most rigourous and modern websites. Built from
        scratch using HTML and CSS. Only the best for you.</p>
    </div>

  </div>
  <footer>
    <p>Create. Develop. Design.</p>
  </footer>
</body>

</html>

/*CSS*/
body {
  font-family: "Poppins", sans-serif;
  margin: 50px 50px 0 50px;
  background-color: #faf9f6;
  display: flex; 
  flex-direction: column; 
  min-height: 95vh;
}

p {
  display: inline;
}

span {
  color: midnightblue;
}


.right > img {
  width: 50%;
  float: left; 
  margin-right: 50px;
}

.left > img {
  width: 50%;
  float: left;
  margin-right: 50px;
}

.left {
  width: 48%;
  display: inline-block;
}

.right {
  width: 48%;
  display: inline-block;
  float: right;
}

.main {
  flex: 1;
}

h1 {
  font-size: 5rem;
}

footer {
  text-align: right;
  color: midnightblue;
}

@media (max-width: 480px) {
  .left {
   width: 100%;
  }
  
  .right {
  width: 100%;
  float: none;
  }

  .tile-image {
    height: 100%;
    width: 100%;
  }

div > h1 {
    font-size: 16px;
  }

.logo {
  height: 50%;
  width: 50%;
}

footer > p {
  text-align: center;
}
}

我能够弄清楚的一件事是，当我将 h2 从 construction 更改为具有 较少字母 的单词，或者只是使其与“beauty”就字母数量 相同时，然后它开始完美工作。

如何在不更改右侧 div 上的 H2 标题的情况下解决此问题？

我希望浮动在两个 div 上同时工作。

我尝试重命名 H2 以使其更短，它开始工作正常，但这对我不起作用。

Answer 1

浮动按预期工作，但右侧

h2

中的“构造”一词根本不适合图像旁边的行（太宽），因此它移到了适合的位置。

使用较小的

h2

 字体大小，使单词足够窄以适合图像旁边和/或减小浮动图像的

margin-right

 以便在图像右侧创建更多空间。

浮动图像不能同时工作

问题描述投票：0回答：1

1个回答

最新问题

浮动图像不能同时工作

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1