Можно ли рисовать линии внутри этого div?

Я отображаю данные в div и хочу посмотреть, смогу ли я использовать CSS для создания трех строк между четырьмя столбцами. Я использую один div, чтобы данные отображались правильно. Хотя было бы неплохо, если бы я использовал отдельные столбцы (тогда я бы сделал border-right: 2px solid black для каждого столбца), мне нравится, как расширяется div по мере добавления новых элементов, поэтому я хочу придерживаться одного div.

Я включил скриншот, который должен лучше объяснить, чего я пытаюсь достичь.

Фрагмент HTML:

<div class = "all-training">

    <h2>All Training Courses</h2>

    <div class = "row">
        <div class = "col">
          <ul class = "all-courses-ul"></ul> 
        </div>
    </div>

</div>

Фрагмент CSS:

.all-courses-ul {
    display: block;
}

.all-courses-ul li {
    display: inline-block;
    font-size: 15px;
    list-style-type: none;
    padding-bottom: 30px;
    text-align: left;
    width: 25%;
}

JS-фрагмент:

import testjson from './test.json';

    function loadAllCourses() {
        let jsonRes = testjson.d.results.map(function(val) {
            return {
                "Title": val.Title
            }
        });

        let allTitles = jsonRes;
        for (var i = 0; i < allTitles.length; i++) {
            $(".all-courses-ul").append("<li>" + allTitles[i].Title + "</li>")
        };

    } // ------------------ loadAllCourses

    loadAllCourses();

Учитывая, что это выглядит так, как будто вы, возможно, визуализируете табличные данные, имеет ли смысл использовать <table>? Или вы хотите использовать CSS display: table?

— 07.03.2019 23:24

html css divide

07.03.2019 23:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете попробовать следующее, возможно:

    .all-courses-ul li {
      border-right: 2px solid #000;
}

.all-courses-ul:last-child li {
     border-right: 0;
}

Не уверен, что ты это имеешь в виду.

07.03.2019 23:29

Как фанатик flexbox, я предлагаю использовать его для вашего макета:

h2 {
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content,
.new-content {
  display: flex;
}

.main-content{
  flex-grow: 1; /* Take the most possible vertical space */
}

.container .col {
  flex-basis: 25%;
}

.main-content .col:not(:last-child) {
  border-right: 2px solid black;  
}

html, body {
  margin: 0;
}

<div class = "container">
  <h2>All Training Courses</h2>
  <div class = "main-content">
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
  </div>
  <div class = "new-content">
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class = "col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
  </div>
</div>

Я бы использовал Flexbox, поверьте мне, но мой проект в основном будет использоваться с IE, который не полностью с ним совместим.

— 07.03.2019 23:38

@Bodrov Я думаю, ты мог бы хотя бы сократить слова до .all-courses-ul:not(:last-child) li { border-right: 2px solid black; }

— 07.03.2019 23:42

07.03.2019 23:37