Question

所以我从W3学校采取了以下两个专栏布局，这将适用于我编码的内容。代码如下：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
  * {
      box-sizing: border-box;
  }
  body {
      margin: 0;
  }
  /* Create two equal columns that floats next to each other */
  .column {
      float: left;
      width: 50%;
      padding: 10px;
      height: 300px; /* Should be removed. Only for demonstration */
  }
  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media (max-width: 600px) {
      .column {
          width: 100%;
      }
  }
</style>
</head>
<body>
  <h2>Responsive Two Column Layout</h2>
  <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>

  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>
  </div>

</body>
</html>

＆＃13;

它适用于我需要的东西，唯一的问题是我需要在列之外取出文本并让文本块在每列的下方居中，以便它看起来像这样：

另外，我需要设计有一个背景图像，并在悬停时有一个单独的图像，以便在光标顶部时它会改变。

非常感谢任何帮助。

Answer 1

试试这个：

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.bigCol {
    float: left;
    width: 50%;
}

.column {
    padding: 10px;
    height: 300px;
}

.row {
    border: 1px solid #CCC;
    text-align: center;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) {
    .bigCol {
        width: 100%;
    }
}

<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>

<div class="row">
    <div class="bigCol ">
        <div class="column" style="background-color:#aaa;"></div>
        <div class="txt"><h2>Column 1</h2><p>Some text..</p></div>
    </div>
    <div class="bigCol ">
        <div class="column" style="background-color:#bbb;"></div>
        <div class="txt"><h2>Column 2</h2><p>Some text..</p></div>
    </div>
</div>

试图修复两列布局

1 个答案: