граница разделителя html неправильно включает все субконтенты

Первая попытка создать веб-сайт на HTML / CSS Django, спасибо за терпение. Я работаю с простым шаблоном резюме и пытаюсь исправить ошибку, которую обнаружил с самого начала (рассматриваемый шаблон https://github.com/resume/resume.github.com/tree/47aba3b380459c07967b4f38c9e77fbe42be07a6).

У меня есть раздел моего раздела моего веб-сайта со следующей визуальной ошибкой (https://imgur.com/a/GaIUXB4). Разделительная линия раздела толщиной 1 пиксель размещается под заголовками, а не после всего содержимого раздела. Это не проблема для других разделов веб-сайта, но у сгруппированных, не построчных элементов, таких как эти два раздела, есть проблемы.

Раздел html

                   <div class="yui-gf">
                        <div class="yui-u first">
                            <h2>Skills</h2>
                        </div>

                        <div class="yui-u">
                                <div class="talent">
                                    <h2>Multi-System Design</h2>
                                    <p>Proven experience with robotic systems spanning mechanical, electrical, and software backgrounds.</p>
                                </div>

                                <div class="talent">
                                    <h2>Interpersonal Reporting</h2>
                                    <p>Familiarity with reporting, documentation, and organization of technical design documents.</p>
                                </div>

                                <div class="talent">
                                    <h2>Problem Based Solutions</h2>
                                    <p>Involvement with team based, problem driven projects that solve a question rather than a set task.</p>
                                </div>

                        </div><!--// .yui-u -->
                    </div><!--// .yui-gf -->

                    <div class="yui-gf">
                        <div class="yui-u first">
                            <h2>Technical</h2>
                        </div>
                        <div class="yui-u">
                            <ul class="talent">
                                <li>SolidWorks</li>
                                <li>Autodesk Inventor</li>
                                <li class="last">Autodesk Eagle</li>
                            </ul>

                            <ul class="talent">
                                <li>MATLAB</li>
                                <li>Python 3</li>
                                <li class="last">ROS</li>
                            </ul>

                            <ul class="talent">
                                <li>SimTK OpenSim</li>
                                <li>SimTK SCONE</li>
                                <li class="last">Lua</li>
                            </ul>

                            <ul class="talent">
                                <li>Microsoft Word</li>
                                <li>Microsoft PowerPoint</li>
                                <li class="last">Microsoft Excel</li>
                            </ul>
                        </div><!--// .yui-u-->
                    </div><!--// .yui-gf-->

И раздел CSS

.yui-gf {
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: 1px solid #ccc;

.last {
    border: none;
}

.skills-list {  }

.skills-list ul {
    margin: 0;
}

.skills-list li {
    margin: 3px 0;
    padding: 3px 0;
}

.skills-list li span {
    font-size: 152%;
    display: block;
    margin-bottom: -2px;
    padding: 0
}

.talent {
    width: 32%;
    float: left
}

.talent h2 {
    margin-bottom: 6px;
}

/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%;}
.yui-gf div.first{width:12.3%;}

Я в некотором смысле озадачен, почему разделитель интервал + применяется после класса заголовка, хотя разделитель yui-gf охватывает все элементы (класс заголовка, класс таланта, письменный контент).

Всего 1 ответ


Скорее всего, виноват плавающий код .talent. При перемещении элементов родитель теряет отслеживание своей высоты, поэтому, если вы проверите инструменты разработчика, вы, скорее всего, обнаружите, что div с классом yui-gf на самом деле заканчиваются там.

Удалите плавающую и ширину .talent и попробуйте использовать grid для родительского элемента, чтобы выровнять его дочерние элементы по столбцам.

.yui-u {
  display: grid;
  grid-template-columns: auto auto auto;
}

Или:

.yui-u {
  display: grid;
  grid-template-columns: 32% 32% 32%;
}

Кроме того, у класса .yui-gf в вашем определении CSS, которое вы вставили здесь, отсутствует закрывающая фигурная скобка.


Есть идеи?

10000