html - 如何使 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>