如何在调整大小时将这4列变为3？

Question

在此处的图像中，一旦页面宽度低于800px，我希望第4列位于第3列。我假设我必须对媒体查询和宽度做一些事情：100％但是到目前为止我还没有成功完成这项工作。我们非常感谢您提供的任何帮助。

这是我的代码：

CSS：

.column-content >h1 {
    margin-left: 1em;
    margin-bottom: 2em;
    padding-top: 2em;
}

.three-columns > aside.list-block {
    padding-right: 23em;
    padding-bottom: 3em;
}

.three-columns > aside.list-block > h3 {
    margin-left: 1em;
    margin-bottom: 2em;
}

.three-columns > aside.list-block > ul > li {
    margin-left: 20px;
    list-style: none;
}

@media screen and (max-width: 800px) {
    aside.list-block {
        width: 100%;
    }
}

<section class="column-content">
  <h1>Three Columns</h1>
  <div class="three-columns">
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
          <li>List Item</li>
          <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
      </ul>
    </aside>
  </div>
</section>

Answer 1

将您的css更改为

＆＃13;

＆＃13;

.column-content>h1 {
    margin-left: 1em;
    margin-bottom: 2em;
    padding-top: 2em;
}

aside.list-block {
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 4 - 4px);
}

.three-columns>aside.list-block {
    padding-bottom: 3em;
}

.three-columns>aside.list-block>h3 {
    margin-left: 1em;
    margin-bottom: 2em;
}

.three-columns>aside.list-block>ul>li {
    margin-left: 20px;
    list-style: none;
}

@media (max-width: 800px) {
.three-columns>aside.list-block {
    width: calc(100% / 3 - 4px);
}
}

＆＃13;

<section class="column-content">
            <h1>Three Columns</h1>
            <div class="three-columns">
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
            </div>
        </section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想你想要这样

＆＃13;

＆＃13;

.list-block{ width:25%; float:left;}

.column-content>h1 {
    margin-left: 1em;
    margin-bottom: 2em;
    padding-top: 2em;
}

.three-columns>aside.list-block {
/*    padding-right: 23em;
    padding-bottom: 3em;*/
}

.three-columns>aside.list-block>h3 {
    margin-left: 1em;
    margin-bottom: 2em;
}

.three-columns>aside.list-block>ul>li {
    margin-left: 20px;
    list-style: none;
}

@media screen and (max-width: 800px) {
    aside.list-block {
        width: 100%;
    }
}

＆＃13;

 <section class="column-content">
            <h1>Three Columns</h1>
            <div class="three-columns">
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
            </div>
        </section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用.three-columns的弹性框，并使用justify-content: flex-end

在右侧对齐弹性项目

.column-content>h1 {
  margin-left: 1em;
  margin-bottom: 2em;
  padding-top: 2em;
}

.column-content {
  width: 100%;
}

.three-columns {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.three-columns>aside.list-block {
  padding-right: 23em;
  padding-bottom: 3em;
}

.three-columns>aside.list-block>h3 {
  margin-left: 1em;
  margin-bottom: 2em;
}

.three-columns>aside.list-block>ul>li {
  margin-left: 20px;
  list-style: none;
}

@media screen and (max-width: 767px) {
  aside.list-block {
    width: 100%;
  }
}

<section class="column-content">
  <h1>Three Columns</h1>
  <div class="three-columns">
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </aside>
    <aside class="list-block">
      <h3>List Heading</h3>
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </aside>

Answer 4

你的CSS就是问题所在。您需要做的就是在不同的媒体查询上指定宽度：

.column-content>h1 {
    margin-left: 1em;
    margin-bottom: 2em;
    padding-top: 2em;
}

.three-columns>aside.list-block {
    width: 25%;
    float: left;
}

.three-columns>aside.list-block>h3 {
    margin-left: 1em;
    margin-bottom: 2em;
}

.three-columns>aside.list-block>ul>li {
    margin-left: 20px;
    list-style: none;
}



@media screen and (max-width: 800px) {
.three-columns>aside.list-block {
    width: 33.333%;
    float: left;
}
}

如果列数不同，您应该只使用display flex mode