Question

我的问题是将页脚栏内的空间分成3部分（每个宽度相同）

    static Map<Integer, Integer> map = new HashMap<>(); 

    public static int newNumber(int n) {
        // store the call count at the null key
        int calls = map.compute(null, (k,v)-> v == null ? 0 : v + 1);

        // initialize the argument entry first time encountered
        map.computeIfAbsent(n, v->calls);

        int c = calls - map.get(n) - 1;
        map.put(n, calls);
        return c;
    }

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  text-align: center;
  /*zentriert ganzen Text im footer*/
}

如果我尝试在页脚中为我的3个项目做类似<div class="footer-items"> <div class="company-items"> <h3 class="company">Company</h3> <ul> <li><a href="text1.html">Text1</a></li> <li><a href="text2.html">Text2</a></li> <li><a href="text3.html">Text3</a></li> </ul> </div> <div class="social-items"> <h3 class="social">Social</h3> <ul> <li><a>Twitter</a></li> <li><a>Instagram</a></li> <li><a>Reddit</a></li> </ul> </div> <div class="other-items"> <h3 class="text">Text4</h3> <ul> <li><a>other1</a></li> <li><a>other2</a></li> </ul> </div> </div>的操作，那将行不通。

感谢您的帮助

Answer 1

您可以使用CSS的flex属性来完成此操作，并且我在下面添加了代码段。请检查：

footer{
            width: 100%; /*breite: 100%*/
            padding: 0;
            margin: 0;
            background-color: darkcyan; /*Hintergrundfarbe*/
            margin-bottom: 0;
            bottom: 0;
          }

          .footer-items{
            width: 80%;
            margin: auto;
            display: flex; /*bringt alle Teile in eine Linie*/
            text-align: center; /*zentriert ganzen Text im footer*/
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
          }

          .footer-items .company-items, .footer-items .social-items, .footer-items .other-items {
            display: block;
            width: 100%;
            text-align: left;
          }

    <div class="footer-items">
        <div class="company-items">
          <h3 class="company">Company</h3>
            <ul>
              <li><a href="text1.html">Text1</a></li>
              <li><a href="text2.html">Text2</a></li>
              <li><a href="text3.html">Text3</a></li>
            </ul> 
        </div>

        <div class="social-items">
          <h3 class="social">Social</h3>
            <ul>
              <li><a>Twitter</a></li>
              <li><a>Instagram</a></li>
              <li><a>Reddit</a></li>
            </ul>
        </div>

        <div class="other-items">
          <h3 class="text">Text4</h3>
            <ul>
              <li><a>other1</a></li>
              <li><a>other2</a></li>
            </ul>
        </div>
  </div>

Answer 2

尝试使用width: 33.33%代替margin-left: 33%，并将该类应用于页脚的每三分之一。这会将页脚分为三列：

.footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-column {
  float: left;
  width: 33.33%;
}

<div class="footer">

  <div class="footer-column">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="footer-column">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="footer-column">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>

Answer 3

我看到您的.footer-items是display: flex;，您可以使其最近的孩子平均成长。

查看摘要。（您还可以删除text-align: center;）

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  /*text-align: center;*/
  /*zentriert ganzen Text im footer*/
}

.footer-items > div {
  flex-grow: 1;
}

<div class="footer-items">

  <div class="company-items">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="social-items">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="other-items">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>

Answer 4

您是否尝试过像这样使用display: grid。您可以为每个页脚项定义3列，并将其宽度设置为1fr或1分数grid-template-columns:1fr 1fr 1fr;。您还可以为而不是边距定义一个网格间隙。

Answer 5

将div元素的宽度设置为33.33％（（（100％）/列数）），并为左右设置0px的空白。

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 100%;
  margin: auto;
  margin-right:0px;
  margin-left:0px;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  text-align: center;
  /*zentriert ganzen Text im footer*/
}

.div-box{
  width:33.33%;
}

<div class="footer-items">

  <div class="company-items div-box">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="social-items div-box">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="other-items div-box">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>

CSS边距：页脚自动发布

5 个答案: