如何将HTML区块内容展示在另一区块右侧？附代码求助

要实现MainContent和ProjectDemos横向并排，同时不打乱按钮内的图片布局，只需在父容器上使用Flex布局，调整两个区块的宽度适配即可，具体修改如下：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Tito's Website!</title>
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
    <!-- 新增容器包裹两个区块，用于Flex布局 -->
    <div class="content-container">
      <div class="MainContent">
        <h1>Im Tito</h1>
        <h2>-A Programmer-</h2>
        <br />
        <p>Hello, my name is Tito Osi. Im intrested in programming</p>
        <br />
        <div>
           <h2>About me:</h2>
           <p>
              I am a middle school student in 7th grade right now. some of my
              intrests include: <br />Computer science, Software enginnering,
              software development, App development, and gamming.
           </p>
        </div>
        <br />
        <br />

        <div>
           <h2>Programming Enthusiast.</h2>
           <p>
              I have experience coding in HTML, CSS, Java-script, and python and I
              love software enginnering. <br>I code in CSS to make my projects look my
              beautifull!
           </p>
        </div>
        <br />
        <br />
        <div>
           <h2>Github projects</h2>
           <p>
              I have make a lot of projects, but some that I am most proud of are:
              <ul>
                  <li><a href="https://github.com/Ti7O/Desktop-Assistant-Prototype-1"
                  >Tito's Desktop Assistant</a
                  ></li><br />
                  <li><a href="https://github.com/Ti7O/Secure-Random-Password-Generator"
                  >Tito's Secure Random Passowrd Generator</a
                  ></li><br />
                  <li><a href="https://github.com/Ti7O/Currency-Converter"
                  >Tito's Currency Converter</a
                  ></li><br />
                  <li><a href="https://github.com/Ti7O/Calculator"
                  >Tito's Simple Calculator</a
                  ></li><br />
              </ul>
           </p>
        </div>
      </div>
      <div class="ProjectDemos">
          <h1>Demos!:</h1>
          <button class="Button">Desktop Assistant <img src="bot.png" alt="Robot"></button>
          <button class="Button">Secure Random Password Generator <img src="padlock.png" alt="lock"></button>
          <button class="Button">Currency Converter <img src="currencies.png" alt="currencies"></button>
          <button class="Button">Calculator <img src="calculator.png" alt="calculator"></button>
      </div>
    </div>
      <script src="script.js"></script>
   </body>
</html>

修改后的CSS代码 #

body {
   font-family: Verdana;
   margin: 0;
   padding: 20px;
   box-sizing: border-box;
}

/* 新增容器，设置Flex布局让子元素横向排列 */
.content-container {
   display: flex;
   gap: 20px; /* 两个区块之间的间距 */
   flex-wrap: wrap; /* 屏幕变小时自动换行，适配移动端 */
}

.MainContent {
   border: 5px solid #000;
   padding: 10px;
   border-radius: 20px;
   flex: 1; /* 自动占据剩余空间，比固定宽度更适配 */
   min-width: 300px; /* 最小宽度，避免屏幕太窄时内容挤压 */
}

.ProjectDemos {
   border: 5px solid #000;
   padding: 10px;
   border-radius: 20px;
   width: 350px; /* 固定合适宽度，也可以用flex:0 0 350px */
   min-width: 300px;
}

.Button {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
   margin: 20px;
   border: 2px solid #000;
   height: 200px;
   width: 200px;
   border-radius: 20px;
}

.Button img {
   max-width: 90%;
}

关键修改点说明 #

• 新增content-container作为父容器，设置display:flex让两个区块横向排列，gap属性控制间距，flex-wrap:wrap保证移动端适配。
• 把MainContent的固定宽度1000px改成flex:1，让它自动占据剩余空间，避免超出屏幕宽度。
• 调整ProjectDemos的宽度为更合理的350px，同时给两个区块设置min-width，防止屏幕过窄时内容挤压变形。
• 保留了Button的Flex布局设置，确保按钮内的文字和图片垂直居中，不会打乱原有布局。

内容的提问来源于stack exchange，提问作者Ti7O