主页 / 问题 / 1118960
Accepted
JustLearn
Asked:2020-05-02 03:54:57 +0000 UTC2020-05-02 03:54:57 +0000 UTC

为什么块的位置有一个巨大的缩进？

  • 772

问题：为什么该块.break位于h1带有巨大缩进的块中440px？
我没有在代码中的任何地方指定它。
如何解决？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: rgba(47, 60, 255, 0.49);
}

.container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

.wrapper {
  display: flex;
  justify-content: center;
  background: #303f62;
  height: calc(100vh - 150px);
  min-height: 1100px;
  width: 100%;
}

.content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #e3ffa2;
  width: 80%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 80%;
  margin-top: 50px;
  background: red;
}

h1 {
  display: flex;
  text-align: center;
  height: 50px;
  margin: 0 auto 30px auto;
}

.break {
  height: 0;
  width: 100%;
}
<div class="container">
  <div class="wrapper">
    <div class="content-wrap">
      <div class="content">
        <h1>О нас</h1>
        <div class="break"></div>
      </div>
      <div class="break"></div>
    </div>
  </div>
</div>

html

2 个回答

  1. 因为你有一个高度为 80% 的 .content 块，而 h1 就在其中。那些。实际上，访问来自于内容块

    • 0
  2. Best Answer

    您有一个.content在样式中指定的元素display: flex; flex-wrap: wrap;
    Aalign-content未指定。默认情况下，它采用值align-content: stretch;
    因此效果。放align-content: flex-start;，它会解决问题。

    示例align-content: stretch; 

    .container {
  background-color: tomato;
  display: flex;
  flex-wrap: wrap;
  
  height: 500px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}
    <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    示例align-content: flex-start;

    .container {
  background-color: tomato;
  display: flex;
  flex-wrap: wrap;
  
  align-content: flex-start;
  
  height: 500px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}
    <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    你的例子：

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: rgba(47, 60, 255, 0.49);
}

.container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

.wrapper {
  display: flex;
  justify-content: center;
  background: #303f62;
  height: calc(100vh - 150px);
  min-height: 1100px;
  width: 100%;
}

.content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start; /* добавил */
  
  background: #e3ffa2;
  width: 80%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* добавил */
  
  width: 100%;
  height: 80%;
  margin-top: 50px;
  background: red;
}

h1 {
  display: flex;
  text-align: center;
  height: 50px;
  margin: 0 auto 30px auto;
}

.break {
  height: 0;
  width: 100%;
  
  border-bottom: 10px solid rgba(47, 60, 255, 1); /* просто выделил */
}
    <div class="container">
  <div class="wrapper">
    <div class="content-wrap">
      <div class="content">
        <h1>О нас</h1>
        <div class="break"></div>
      </div>
      <div class="break"></div>
    </div>
  </div>
</div>

    • 0

相关问题