时间戳

首页 > 解决方案 > 如何使段落适合不同的浏览器宽度

html - 如何使段落适合不同的浏览器宽度

问题描述

我正在为我的个人博客文章建立一个html模板CSS。我的部分博客内容如下：

.content {
  text-align: center;
  width: 60%;
}

.blog_content {
  background-color: white;
  width: 60%;
}
<section class="content">
  <div class="row">
    <div class="blog_content">
      <h2>This is the post title!</h2>
      <h3>Title description!</h3>
      <div class="photo">
        <img src="#" alt="NULL">
      </div>
      <p>
        This is the first paragraph!
      </p>
    </div>
  </div>
</section>

我想让段落总是浏览器宽度的 60% 并且总是居中。但是，我的CSS代码不起作用——我尝试将 text-align: center 和 width: 60% 放在内容部分的每个容器中，但没有任何效果。

非常感谢任何帮助！！！

标签： htmlcssfrontendblogsparagraph

解决方案

您正在复制您的宽度声明。您只需将内容宽度声明为 100%，然后将其段落声明为 60%：

.content {
    text-align: center;
    width: 100%;
}

.content > p {
  background-color: white;
  width: 60%;
  margin: 0 auto;
  display:block;
}

或者，最好，你可以给你的段落标签一个类，并直接在你的 CSS 中定位它们。

推荐阅读