主页 / 问题 / 744666
Accepted
D.Ryksd
Asked:2020-11-14 23:15:37 +0000 UTC2020-11-14 23:15:37 +0000 UTC

内联块不适合块，我该怎么办？

  • 772

您需要将块排成一行。它们的宽度应该是父级和框架的 1/3。块之间不应该有缩进。我似乎一切都做对了，但是第三块从底部爬出一条新线。什么我不明白... 

.ex1 .variant1 {
  box-sizing: border-box;
  background: red;
}

.ex1 .variant1 .red {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
  margin: -5px;
}

.ex1 .variant1 .green {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
  margin: -5px;
}

.ex1 .variant1 .blue {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
  margin: -5px;
}
<div class="ex1">
  <div class="cols variant1">
    <div class="red">
      <h3>Погода</h3>
      <p>Сегодня солнечно</p>
    </div>
    <div class="green">
      <h3>Курс доллара</h3>
      <p>1 доллар США = 30,32 рубля</p>
    </div>
    <div class="blue">
      <h3>Сейчас в кино</h3>
      <p>Пятый элемент (2002)</p>
    </div>
  </div>

html

2 个回答

  1. Best Answer

    问题是

    box-sizing: border-box;

    只设置一个元素。

    具有display:inline-block值的元素content-box。这意味着边框的大小不会包含在计算的宽度中，而是会放在顶部。由于边框宽度与主宽度相比相当大，因此最终块大小的总和大于 100%，因此会发生回绕。

    对于解决方案，您可以box-sizing: border-box;为所有 div 设置，像这样

    .ex1 div {
  box-sizing: border-box;
}

.ex1 .variant1 {
  box-sizing: border-box;
  background: red;
}

.ex1 .variant1 .red {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
}

.ex1 .variant1 .green {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
}

.ex1 .variant1 .blue {
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
}
    <div class="ex1">
  <div class="cols variant1">
    <div class="red">
      <h3>Погода</h3>
      <p>Сегодня солнечно</p>
    </div><!--
    --><div class="green">
      <h3>Курс доллара</h3>
      <p>1 доллар США = 30,32 рубля</p>
    </div><!--
    --><div class="blue">
      <h3>Сейчас в кино</h3>
      <p>Пятый элемент (2002)</p>
    </div>
  </div>

    或者只是减小边框的大小：

    .ex1 .variant1 {
  box-sizing: border-box;
  background: red;
}

.ex1 .variant1 .red {
  display: inline-block;
  width: 33.3%;
  border: solid 3px black;
  margin: -5px;
}

.ex1 .variant1 .green {
  display: inline-block;
  width: 33.3%;
  border: solid 3px black;
  margin: -5px;
}

.ex1 .variant1 .blue {
  display: inline-block;
  width: 33.3%;
  border: solid 3px black;
  margin: -5px;
}
    <div class="ex1">
  <div class="cols variant1">
    <div class="red">
      <h3>Погода</h3>
      <p>Сегодня солнечно</p>
    </div>
    <div class="green">
      <h3>Курс доллара</h3>
      <p>1 доллар США = 30,32 рубля</p>
    </div>
    <div class="blue">
      <h3>Сейчас в кино</h3>
      <p>Пятый элемент (2002)</p>
    </div>
  </div>

    • 1

  2. 你没有考虑到边界标记。边框是从外面画的，所以边框是从里面画的 box-sizing:border-box;

    .ex1 .variant1 {
  background: red;
}
.ex1 .variant1 .red {
box-sizing:border-box;
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;

}

.ex1 .variant1 .green {
box-sizing:border-box;
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
  margin: -5px;
}

.ex1 .variant1 .blue {
box-sizing:border-box;
  display: inline-block;
  width: 33.3%;
  border: solid 10px black;
  margin: -5px;
}
    <div class="ex1">
  <div class="cols variant1">
    <div class="red">
      <h3>Погода</h3>
      <p>Сегодня солнечно</p>
    </div>
    <div class="green">
      <h3>Курс доллара</h3>
      <p>1 доллар США = 30,32 рубля</p>
    </div>
    <div class="blue">
      <h3>Сейчас в кино</h3>
      <p>Пятый элемент (2002)</p>
    </div>
  </div>

    • 1

相关问题