不能为不同的屏幕尺寸居中和弯曲分组元素

Posted 2023-03-07

【中文标题】不能为不同的屏幕尺寸居中和弯曲分组元素

【英文标题】：Can't Center and Flex Grouped Elements for Different Screen Sizes

【发布时间】：2021-09-13 15:42:04

【问题描述】：

我对 html 和 CSS 创作非常陌生，所以我在尝试创建一个可以根据不同屏幕尺寸自动调整的漂亮元素的显示/布局方面付出了很多努力。

请注意：

这将只是一个单页网站

本网站的内容已被愚蠢的例子取代。

我想要什么：

电脑屏幕：

在 PC 窗口上显示：

移动屏幕：

在移动窗口中显示：

。 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

我目前看到的：

它目前在 PC 屏幕上的显示方式：

它当前在移动视图上的显示方式：

这是我的代码：

.header 
  padding: 40px;
  text-align: center;
  background: #4169E1;
  flex-direction: column;
  flex-wrap: wrap;


h1 
  color: white;
  font-family: arial;
  font-style: bold;
  font-size: 64px;
  text-align: center;


h2 
  color: #8B0000;
  font-family: arial;
  font-style: bold;
  font-size: 36px;
  text-align: center;


h3 
  font-family: arial;
  font-style: bold;
  font-size: 24;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;


p 
  font-family: arial;
  font-size: 16;


.container 
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  padding-bottom: 50px;


.box 
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;


table 
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  float: center;
  font-family: arial;

<div class=header>
  <h1>YUP.</h1>
</div>
<div class="container">
  <h2>SUB TITLE</h2>
</div>
<div class="box">
  <div>
    <h3><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"  style="width: 200px; height: auto;"><br>SUCH A SQUARE</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/580679/pexels-photo-580679.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"  style="width: 200px; height: auto;"><br>ECLIPSE OF THE HEART</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/3802667/pexels-photo-3802667.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"  style="width: 200px; height: auto;"><br>TRY ME</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/735871/pexels-photo-735871.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"  style="width: 200px; height: auto;"><br>Starry Night</h3>
  </div>
</div>
<div>
  <p>
    <table>
      <tr>
        <th style="text-align: left;">THIS BUILDING</th>
        <th style="text-align: left;">HOURS OF OPERATION:</th>
      </tr>
      <tr>
        <td>1234 This Address Rd.</td>
        <td>MONDAY-THURSDAY: 8am - 5pm</td>
      </tr>
      <tr>
        <td>Fake City, IL 12345</td>
      </tr>
    </table>
  </p>

【参考方案1】：

代码有很多错误，但要使框 div 响应，您可以执行以下操作：

.box 
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;


.box div 
  flex: 1 1 220px;
  text-align: center;

【讨论】：

非常感谢！是的，自从您回复以来，我也找到了设置代码的正确方法。感谢您的帮助！