Элементы строки таблицы CSS / HTML распределяются по горизонтали - PullRequest
Новая
       33

Элементы строки таблицы CSS / HTML распределяются по горизонтали

0 голосов
/ 10 сентября 2018

Я пытаюсь распределить три блока равномерно по всему ряду. Я попытался добавить «width: 100%» и удалить заполнение в последнем дочернем элементе, но, похоже, это не сработало.

В итоге три поля должны иметь одинаковую ширину, которая распределена по максимальной ширине строки, которая подстраивается под размер экрана. 

.bottom_section {
  display: table;
  height: 100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}
<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

Заранее спасибо за любые советы

РЕДАКТИРОВАТЬ: после первых нескольких ответов, кажется, что на самом деле, распределение в порядке. проблема заключается в заполнении, поскольку все элементы имеют право отступа 30 пикселей, кроме последнего дочернего элемента (0 пикселей). Я добавил отступы слева и справа и не добавил отступа слева для «first-child», но затем средний блок стал меньше. все еще пытаюсь и с нетерпением жду элегантных решений. спасибо

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Это похоже на Chrome с шириной: 100% на bottom_section. (просто добавил зеленую рамку, чтобы он отображал столбец с) Какой браузер вы используете? 

.bottom_section {
  display: table;
  height: 100%;
  width:100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
  border:1px solid green;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}
<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>
0 голосов
/ 10 сентября 2018

Поскольку вам необходимо одномерное форматирование, я бы рекомендовал использовать flexbox 

.bottom_section {}

.bottom_section ul {
  display: flex;
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bottom_section ul li {
  width: 33.33%;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}
<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>
...