Question

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

我尝试过使用媒体查询，但只要缩小窗口宽度，列就会消失。的 P.S。我只能纯粹使用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

将<{1}}用于此

＆＃13;

flexbox

＆＃13;

.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;
  }
}

＆＃13;

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>

如何使3列响应？

2 个答案: