Почему, когда я использую float, последний элемент переходит на следующую строку? - PullRequest
Новая
       15

Почему, когда я использую float, последний элемент переходит на следующую строку?

0 голосов
/ 17 февраля 2020

Я не понимаю, почему и как исправить тот факт, что красный блок переходит на следующую строку. Из c я могу использовать margin-left: 5% для 2-го и 3-го блока, чтобы исправить это, но это неправильно. Так как же распределить все три блока в одной строке и сделать их общую ширину с полями равной 100%? 

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 5%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}
<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

1 Ответ

2 голосов
/ 17 февраля 2020

3 * (30% + 5%) равняется 105% (= шире, чем 100%), вот причина. Измените значение маржи на 3%, и оно будет работать (3 * (30% + 3%) = 99%). 

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 3%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}
<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

В качестве альтернативы вы можете применить левое поле только ко второму и третьему блоку и оставить его на уровне 5%. Это также будет держать блоки в центре их контейнера: 

.clearfix::after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top: 20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding: 20px;
  margin: auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

.item-2,
.item-3 {
  margin-left: 5%;
}
<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>
...