Разделить на 3 столбца

Question

Я пытаюсь сделать бар с 3 столбцами, но не могу получить <a>, чтобы разделить поровну.

, если я поставлю ширина 33% бар снят с охраны, только с 30% ширины он стабилизируется, но столбцы не остаются в равных частях.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
}

.MenuDown a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}

.a1,
.a2,
.a3 {
  width: 30%;
}

<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>

Answer 1

Попробуйте это в своем основном Div MenuDown:

 display:flex;
 justify-content:space-between;

Вам не нужно использовать ширину для тега <a>, вам просто нужно использовать .MenuDown a{...}, чтобы иметь width:100; и flex позаботится обо всем остальном в равной степени без ширины.

Это поможет вам иметь одинаковое расстояние между количеством элементов, которые у вас есть внутри div.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  border: 1px solid black;
  width: 100%;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}

<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>

Answer 2

Вы можете рассмотреть возможность использования сетки CSS, но она не поддерживается также IE9 (хотя она была изобретена ими). align-items:end; позиционирует элементы в конце контейнера. grid-template-rows: 1fr; - установить один ряд, а grid-template-columns: repeat(3, 1fr) - разделить его на 3 равных контейнера. repeat(x ,y) повторяется y х раз.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.MenuDown {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr); //or use 33.33% in place of 1fr
  align-items: end;
  position:fixed;
  bottom: 0%;
  background-color: #f5d94e;
}
.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
}
.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}

<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>

Благодарность за объяснение того, как сделать элементы сетки go снизу: Положение элементов сетки, начинающихся снизу

Answer 3

Проблема, с которой вы здесь столкнулись, связана с отображением якоря с плавающей точкой и встроенным отображением, так как согласно kapreski есть новое и расширенное правило, поэтому нет необходимости использовать float в этом сценарии, просто попробуйте согнуть и дать равную ширину всем элементам. , так что вы можете сделать это разными способами.

Я показал один из них во фрагменте, а другие следующие:

1. Если вы не хотите использовать flex, то его Ладно, просто сделайте отображение блока привязки или встроенного блока и установите его ширину 33,33% и не нужно использовать float, отображение встроенного блока или блока необходимо только потому, что встроенные элементы не принимают ширину.
2. 2-й вариант используя гибкий, но другой подход, в моем примере вы также можете задать ширину якоря на 100%, так как у его родителя нет свойства flex-wrap: wrap, они будут иметь одинаковую ширину и будут располагаться рядом.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  width: 33.33%;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}

<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>