如何使 3 列响应？

Question

我正在尝试制作响应式 3 列布局，因此当网站的访问者缩小窗口宽度时，列会垂直对齐而不是水平对齐例如在此网站上：http://outdatedbrowser.com/

我尝试过使用媒体查询，但是当我缩小窗口宽度时，这些列就会消失。 附注我只能纯粹使用 CSS 和 HTML，我不能使用任何类型的框架，因为这是我正在做的大学作业

我有 3 列：

  <div class="showcaseContainer">
    <div class="col1"><p>The Raven's Claw</p></div>
    <div class="col2"></div>
    <div class="col3"></div>
  </div>

下面是 CSS

.showcaseContainer {
    margin:  10px auto;
    width: 100%;
    }

.showcaseContainer > div {
    width: 33%;
    }

.col1 {
    width: 23.8%;
    height: 298px;
    float: left;

    border-left: 10px solid #000;
    background-color: orange;
    background-image: url('')
}
.col2 {
    width: 23.8%;
    height: 298px;
    float: right;

    border-left: 10px solid #000;
    background-color: purple;
    background-image: url('')
}

.col3 {
    width: 23.8%;
    height: 298px;
    margin: auto; /* mid column */

    border-left: 10px solid #000;
    background-color: red;
    background-image: url('')
}

有什么建议吗？

Answer 1

为此使用flexbox

.showcaseContainer {
  display: flex;
}
.showcaseContainer > div {
  flex: 1;
}

.col1 {
    height: 298px;
    border-left: 10px solid #000;
    background-color: orange;
    background-image: url('')
}
.col2 {
    height: 298px;
    border-left: 10px solid #000;
    background-color: purple;
    background-image: url('')
}

.col3 {
    height: 298px;
    border-left: 10px solid #000;
    background-color: red;
    background-image: url('')
}
@media screen and (max-width: 600px) {
  .showcaseContainer{
    flex-direction: column;
  }
}

<div class="showcaseContainer">
    <div class="col1"><p>The Raven's Claw</p></div>
    <div class="col2"><p>Col 2</p></div>
    <div class="col3"><p>Col 3</p></div>
  </div>

Answer 2

使用媒体查询 - 在大多数情况下，您也在列类中声明相同的规则 - 您可以简化它以使您的代码运行更高效。

这是DEMO

.showcaseContainer {
    margin:  10px auto;
    width: 100%;
    }

.col1,
.col2,
.col3 {
    width: calc(100% / 3 - 10px); /* Divide by 3 columns and subtract 10px for border size */
    height: 298px;
    float: left;

    border-left: 10px solid #000;
}

.col1 {
    background-color: orange;
    background-image: url('');
}
.col2 {
    background-color: purple;
    background-image: url('');
}
.col3 {
    background-color: red;
    background-image: url('');
}

@media screen and (max-width: 600px) {
  .col1,
  .col2,
  .col3 {
    /* Specify your width rule here - Examples */
    /* width: 100%; - Having 1 column */
    width: calc(50% - 10px); /* Having 2 columns */
  }
}

<div class="showcaseContainer">
    <div class="col1"><p>The Raven's Claw</p></div>
    <div class="col2"></div>
    <div class="col3"></div>
  </div>