html - 使用CSS制作响应式网格

我正在尝试制作一个响应式主页。但是，我无法实现我想要的。我将用一些代码和图像更好地解释。

目前，我的主页看起来像这样，



首先，我要使底部的两个按钮与图像对齐，同时要记住顶部的3个按钮与图像的顶部对齐。

我尝试添加页边距和填充，但是在响应式设计中它破坏了页面。我希望页面完整（可恢复）至少为1024p。我可以管理其他低于1024的内容（可能是将模板从480p更改为1023p）。

.HomeContent {
  float: left;
  width: 90%;
  height: 100%;
  color: #c4c4c4;
  margin: 1% 5%;
}

.HomeContent #LeftImageBox {
  float: left;
  width: 45%;
  height: 100%;
  border: solid 1px;
  margin-right: 1%;
}

.HomeContent #LeftImageBox img {
  float: right;
  display: block;
  width: 100%;
}

.HomeContent #RightContentBox {
  float: left;
  width: 54%;
  height: 100%;
  border: solid 1px;
}

.HomeContent #TopMenuBox,#WelcomeBox,#SubRightBox1 {
  float: left;
  width: 100%;
  height: 50%;
  border: solid 1px;
  margin: 0 1px 1px 0;
}

.HomeContent .tile-grid {
  text-align: justify;
}

.HomeContent .tile-grid li {
  display: inline-block;
  margin: 0;
}

.HomeContent .tile-grid: after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

.HomeContent .tile-grid span {
  background-color: #f26323;
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

.HomeContent .tile-grid span: hover {
  background-color: white;
  color: #f26323;
}

<div class="HomeContent">
  <div id="LeftImageBox">
    <img alt="" src="http://dummyimage.com/498x500/4f4f4f/ffffff.png" />
  </div>

  <div id="RightContentBox">

    <div id="TopMenuBox">
      <ul class="tile-grid">
        <li><a><span>bathroom</span></a></li>
        <li><a><span>kitchen</span></a></li>
        <li><a><span>laundry</span></a></li>
      </ul>
    </div>

    <div id="WelcomeBox">
      <h1><span>This is ASOS</span></h1>
      <h3><span>YOUR ONE-STOP<br />FASHION DESTINATION</span></h3>
      <p>Shop from over 850 of the best brands, including ASOS' own label.Plus, get your daily fix of the freshest style, celebrity and music news.</p>
    </div>

    <div id="SubRightBox1">
      <ul class="tile-grid">
        <li><a><span>new products</span></a></li>
        <li><a><span>tips &amp; trends</span></a></li>
      </ul>
    </div>
  </div>
</div>

最佳答案

每当浏览器尺寸缩小时，使用@media进行更改。

例如：

@media (max-width: 1024px) {
    // Here is an example:
    // When the browser size shrinks down to 1024px or less,
    // The background-color of the body will change to red.
    body {
        background-color: red;
    }
}

当您调整浏览器的大小大于1024px时，红色背景色将被删除。

关于html - 使用CSS制作响应式网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37981481/