html - 将文本限制为容器宽度并保持居中样式

coder 2023-08-09 原文

我想创建一个这样的关于页面 example

我想我差不多搞定了，我有一个 4 人的响应式容器

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
}

.memberFocus {
  width: 70%;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) {
  #members {
    display: block;
  }
  .memberContainer {
    width: 100%;
    display: block;
    text-align: center;
  }
  .memberFocus {
    width: 100%;
  }
}

@media(max-width: 800px) {
  .section {
    padding: 60px 80px;
  }
}

@media(max-width: 600px) {
  .section {
    padding: 40px 40px;
  }
}

@media(max-width: 400px) {
  .section {
    padding: 20px 10px;
  }
}

<div id="about" class="section">
  <h1 id="aboutHeader" class="sectionHeader">
    Who we are
  </h1>
  <div id="members">
    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Foo Bar
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Bar Foo
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          John Doe
        </h2>
        <p class="memberFocus">
          Corporate Design, Print Design, Android Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Olaf Svenson
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development
        </p>
      </div>
    </div>
  </div>
  <p id="aboutAttracting">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

请在大屏幕上打开代码段，否则您只会看到移动 View 。

如您所见，我想将文本宽度限制为容器宽度的 80%。结果看起来像

容器本身居中，但在限制文本时 View 看起来不对。

正常情况下应该是这样的

但我不想使用 text-align: center，因为文本仍应保持对齐。

如何修复文本限制？

最佳答案

我认为这对你有用

我已将 flex: 用于 .memberContainer 子级并删除了 .memberFocus 样式

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

.memberImgContainer {
  flex: .4;
  text-align: right;
}

.memberTxtContainer {
  flex: .5;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) {
  #members {
    display: block;
  }
  .memberContainer {
    width: 100%;
    display: block;
    text-align: center;
  }
  
  .memberImgContainer {
    flex: 1;
    text-align: center;
  }

  .memberTxtContainer {
    flex: 1;
  }
}

@media(max-width: 800px) {
  .section {
    padding: 60px 80px;
  }
}

@media(max-width: 600px) {
  .section {
    padding: 40px 40px;
  }
}

@media(max-width: 400px) {
  .section {
    padding: 20px 10px;
  }
}

<div id="about" class="section">
  <h1 id="aboutHeader" class="sectionHeader">
    Who we are
  </h1>
  <div id="members">
    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Foo Bar
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Bar Foo
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          John Doe
        </h2>
        <p class="memberFocus">
          Corporate Design, Print Design, Android Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Olaf Svenson
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development
        </p>
      </div>
    </div>
  </div>
  <p id="aboutAttracting">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

希望这对您有所帮助。

关于html - 将文本限制为容器宽度并保持居中样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52091362/

容器 html 34 class gt css

有关html - 将文本限制为容器宽度并保持居中样式的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

html - 将文本限制为容器宽度并保持居中样式

有关html - 将文本限制为容器宽度并保持居中样式的更多相关文章

随机推荐