时间戳

首页 > 解决方案 > 如何使文本流到其他div？

html - 如何使文本流到其他div？

问题描述

我正在使用弹性盒。我正在尝试使“健康膳食”这一文字与送餐保持一致。然而唯一的问题是它在两个单独的 div 中。

我希望我的代码看起来像这样。

在此处输入图像描述

我目前有这个：

在此处输入图像描述

所以我的猜测是我需要让文本溢出到下一个 div。有人知道怎么做吗？

这是我的代码。

.mainheader {
  display: flex;
  justify-content: space-around;
  border: 2px solid green;
  width: 100%;
  background-image: url(./img/hero.jpg);
  height: 100vh;
}

.menu {
  display: inline-flex;
  border: 1px solid red;
  width: 70%;
  justify-content: space-around;
  margin-top: 25px;
}

.mainheader>div:first-child {
  border: 1px solid red;
  width: 40%;
  margin-left: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>omnifoods</title>
</head>

<body>

  <div class="mainheader">
    <div class="slogan">
      <h1>GoodBye Junk Food. <br> Hello Super Healthy Meals.</h1>
      <div class="butt">
        <button style="margin-right: 20px;">I'm hungry</button>
        <button>Show me more</button>
      </div>
    </div>
    <div class="menu">
      <div>Food Delivery</div>
      <div>How it works</div>
      <div>Our cities</div>
      <div>Sign up</div>
    </div>
  </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

只需按如下方式添加white-space: nowrap到h1标签，它将防止断字。

.mainheader {
  display: flex;
  justify-content: space-around;
  border: 2px solid green;
  width: 100%;
  background-image: url(./img/hero.jpg);
  height: 100vh;
}

.menu {
  display: inline-flex;
  border: 1px solid red;
  width: 70%;
  justify-content: space-around;
  margin-top: 25px;
}

.mainheader>div:first-child {
  border: 1px solid red;
  width: 40%;
  margin-left: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>omnifoods</title>
</head>

<body>

  <div class="mainheader">
    <div class="slogan">
      <h1 style="white-space: nowrap;">GoodBye Junk Food. <br> Hello Super Healthy Meals.</h1>
      <div class="butt">
        <button style="margin-right: 20px;">I'm hungry</button>
        <button>Show me more</button>
      </div>
    </div>
    <div class="menu">
      <div>Food Delivery</div>
      <div>How it works</div>
      <div>Our cities</div>
      <div>Sign up</div>
    </div>
  </div>
</body>

</html>

推荐阅读