时间戳

首页 > 解决方案 > 当标题浮动时如何将标题和段落放在单独的行中？

html - 当标题浮动时如何将标题和段落放在单独的行中？

问题描述

我只是想在段落的右侧和下方获取标题。所以我只是试图向右浮动标题。但是段落和标题在同一行。当标题位于 div 的右侧时，如何获取标题下的段落。我试过这样。

.aboutus{
    height: 100vh;
    width: 100%;
  }
  .details{
    
  }
  .details h1{
    float: right;
    text-transform: uppercase;
    color: #EE4036;
    font-size: 4.5em;
    font-weight: bold;
  }
<section class="row aboutus">
    <div class="container">
      <div class="details">
        <h1>about us</h1>
        <p>some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.
        </p>
      </div>
    </div>
 </section>

标签： htmlcss

解决方案

您可以为此使用 text-align 属性。text-align 属性指定元素中文本的水平对齐方式。

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
}

div.c {
  text-align: justify;
}

您可以使用此链接尝试更多关于 text-align 属性的信息。 https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align

这是你预期的结果？？？

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <style>
        .aboutus{
            height: 100vh;
            width: 100%;
        }
        .details{

        }
        .details h1{
            text-align: right;
            text-transform: uppercase;
            color: #EE4036;
            font-size: 4.5em;
            font-weight: bold;
        }
    </style>
</head>

<body>

<section class="row aboutus">
    <div class="container">
        <div class="details">
            <h1>about us</h1>
            <p>some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.some text here.
            </p>
        </div>
    </div>
</section>
</body>
</html>

推荐阅读