列和侧边栏中的 Flexbox 主要内容答案

【问题标题】：Flexbox main content in columns and sidebar列和侧边栏中的 Flexbox 主要内容
【发布时间】：2022-09-22 22:14:24
【问题描述】：

我正在寻找一个网站，以多个div为主要内容，相互堆叠，右侧边栏显示图片，类似于reddit的布局。使用 CSS flexbox - 如何让我的主要内容 div 对齐？为凌乱的代码道歉，我对这一切都很陌生（我也确信有一种方法可以使所有元素都具有相同的背景颜色..我该怎么做？）

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.container div {
  border: 3px #c63a32 solid;
  color: azure;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
}

.info {
  order: 1;
  width: 50%;
  background-color: #0f3047
}

.info p {
  font-size: 35;
  background-color: #0f3047
}

.info span.ips {
  font-size: 35;
  color: yellow;
  background-color: #0f3047
}

.info span.about {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

span.or {
  color: azure;
  background-color: #0f3047
}

.gallery {
  width: 15%;
  order: 3;
  background-color: #0f3047;
}

.gallery span.text {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

.gallery p {
  background-color: #0f3047;
}

.contact {
  order: 3;
  width: 50%;
  background-color: #0f3047;
}

.contact span.CONTACT {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

<div class=\"container\">

  <div class=\"info\">
    <p><span class=\"about\">ABOUT US</span>xxx<br> xxx <br>
      <br>xxx<span class=\"ips\">xxx <span class=\"or\"> or</span> xxx </span>
    </p>
  </div>

  <div class=\"gallery\">
    <p><span class=\"text\">GALLERY</span></p>
    <!-- <img src=\"favicon.png\"> -->
  </div>
  <div class=\"contact\"> <span class=\"CONTACT\">CONTACT</span> </div>

</div>

您应该提供最终结果应该是什么样子的模型。从您的描述中不清楚您要实现的最终布局是什么。
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如它目前所写的那样，很难准确地说出你在问什么。
您应该将要组合的元素放在同一个容器中。
你要求我们为你做这项工作吗？或者你想学习如何去做？无论如何，我认为您需要学习如何正确布局您的页面。你可以在这里学习link

标签： html css flexbox

【解决方案1】：

也许您需要尝试为左侧或右侧内容制作容器。然后为它们中的每一个插入类并给出css规则，在这种情况下，我添加了左列和右列。

这是html

<div class="container">
      <div class="column-left">
          <div class="info">
            <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
              <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
            </p>
          </div>    
          <div class="contact"> <span class="CONTACT">CONTACT</span> </div>  
      </div>
      
      <div class="gallery column-right">
        <p><span class="text">GALLERY</span></p>
        <!-- <img src="favicon.png"> -->
      </div>
 </div>

这是每一列的样式。

.column-left {
  float: left;
  width: 70%;
  padding: 10px;
  height: 300px; 
}

.column-right {
  float: left;
  width: 30%;
  padding: 10px;
  height: 300px; 
}

    .container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .container div {
      border: 3px #c63a32 solid;
      color: azure;
      padding: 10px;
      margin: 10px;
      border-radius: 15px;
    }

    .info {
      order: 1;
      width: 50%;
      background-color: #0f3047
    }

    .info p {
      font-size: 35;
      background-color: #0f3047
    }

    .info span.ips {
      font-size: 35;
      color: yellow;
      background-color: #0f3047
    }

    .info span.about {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }

    span.or {
      color: azure;
      background-color: #0f3047
    }

    .gallery {
      width: 15%;
      order: 3;
      background-color: #0f3047;
    }

    .gallery span.text {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }

    .gallery p {
      background-color: #0f3047;
    }

    .contact {
      order: 3;
      width: 50%;
      background-color: #0f3047;
    }

    .contact span.CONTACT {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }
    .column-left {
      float: left;
      width: 60%;
      padding: 10px;
      height: 300px; 
    }

    .column-right {
      float:left;
      width: 20%;
      padding: 10px;
      height: 300px; 
    }

    <div class="container">
      <div class='column-left'> 
        <div class="info">
          <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
            <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
          </p>
        </div>
        <div class="contact"> <span class="CONTACT">CONTACT</span> </div>
      </div>

      <div class="gallery column-right">
        <p><span class="text">GALLERY</span></p>
        <!-- <img src="favicon.png"> -->
      </div>

    </div>

【讨论】：

请使代码可执行并将其放入sn-p中。