Как я могу исправить среднюю колонку без заполнения?
Я делаю сайт-подражатель Drudge Report для практики.
Во время кодирования я заметил, что заполнение не работает в среднем столбце. Рядом с <hr> / разделительными линиями нет пробелов, что очень портит общий вид.
a {
color: black;
}
.container {
font-size: 12.5px;
}
.top-list ul {
margin: 0;
margin-top: 70px;
padding: 0;
font-family: COURIER, sans-serif;
font-weight: bolder;
list-style: none;
text-decoration: underline;
}
.top-list li:nth-child(3) a {
color: red;
text-decoration: underline;
text-decoration-color: red;
}
.top-list li:nth-child(10) a {
color: red;
text-decoration: underline;
text-decoration-color: red;
}
.main-image {
margin-top: 30px;
text-align: center;
}
.middle-text {
font-family: ARIAL, VERDANA, HELVETICA;
font-weight: bold;
text-align: center;
text-decoration: underline;
}
.middle-text p {
margin: 0px;
padding: 0px;
font-size: 47px;
}
.middle-text img {
margin-bottom: 45px;
}
.left-column {
float: left;
width: 33%;
padding-right: 5px;
font-family: COURIER, sans-serif;
text-decoration: underline;
font-weight: bolder;
border-right: 1px solid #000;
height: 2460px;
}
.left-column img {
width: 200px;
}
.middle-column {
text-align: center;
width: 33%;
padding-left: 5px;
padding-right: 5px;
font-family: COURIER, sans-serif;
text-decoration: underline;
font-weight: bolder;
}
.middle-column img {
width: 200px;
}
.right-column {
float: right;
width: 33%;
padding-left: 5px;
font-family: COURIER, sans-serif;
text-decoration: underline;
font-weight: bolder;
border-left: 1px solid #000;
height: 2460px;
}
.right-column img {
width: 200px;
}<!-- Left Column -->
<div class = "left-column">
<div class = "container">
<a href = "http://www.zerohedge.com/">ZERO HEDGE</a>
<hr>
</div>
</div>
<!-- Right Column -->
<div class = "right-column">
<div class = "container">
<img src = "images/people.jpg">
<p><a href = "https://apnews.com/article/donald-trump-pandemics-europe-basketball-meghan-markle-abc35f110e954524437eb7142912cd6a">In year dominated by pandemic, many other dramas unfolded...</a></p>
<hr>
</div>
</div>
<!-- Middle Column -->
<div class = "middle-column">
<div class = "container">
<img src = "images/person.jpg" alt = "Person">
<hr>
<p><a href = "https://www.independent.co.uk/news/world/americas/virgin-galactic-space-plane-test-abort-b1771292.html">GALACTIC forced to abort key test flight of space plane...</a></p>
<p><a href = "https://apnews.com/article/space-tourism-new-mexico-us-news-coronavirus-pandemic-bccddfbcb8019dd7e3a58c320d5f79c4"><i>Rocket motor fails to ignite...</i></a></p>
</div>
</div>Полный HTML-код можно найти на PasteBin.
Хм.. это, кажется, ломает его больше. Теперь средний текст идет ниже левого столбца и располагается по центру, а не по центру, но текст начинается слева (если это имеет смысл). Как бы мне это исправить?
Пожалуйста, опубликуйте минимальный воспроизводимый пример. HTML всегда нужен для CSS.
Отредактировал исходный пост, чтобы добавить HTML, который вызывает это.
почему вместо css-grid используется такая древняя техника проектирования? Более простое, чистое и современное решение.
Я действительно не уверен, каков ожидаемый результат. Куда должен идти раздел «Персона»? В любом случае, с float трудно иметь дело; float: left;, float: right; и text-align: center; не соответствуют левому, правому и среднему столбцам соответственно. Вам понадобится float: left; для всех трех столбцов и иметь ширину 33 % за вычетом границ или отступов, если вы не используете правильный box-sizing, если вы не используете очень старый браузер… Есть лучшие альтернативы, например columns, Flex, Сетка.
Ответы 1
Похоже, HTML/CSS выше использует свойство CSS float для создания макета из 3 столбцов.
Это старый и неэффективный способ (Flexbox предпочтительнее для колонок, Grid — для более сложных макетов).
Предупреждение об использовании float заключается в том, что middle-column не должно быть установлено width, а должны быть margin-left и margin-right, которые соответствуют размерам левого и правого столбцов. Вот пример.
.middle-column {
/* width: 33%; do not apply width, it would not fit */
margin-left: 33%; /* skip over left column */
margin-right: 33%; /* skip over right column */
}
Приведенный выше стиль должен решить проблему. Но я бы порекомендовал посмотреть руководство по Flexbox.
Flexbox может справиться с этим и другими вариантами использования. Он хорошо поддерживается текущими браузерами.
Вот макет из 3 столбцов с использованием Flexbox:
.flex-row {
display: flex;
flex-direction: row;
}
.left-column {
width: 33%;
}
.right-column {
width: 33%;
}
.middle-column {
width: 33%;
}<div class = "flex-row">
<div class = "left-column">
Left column
</div>
<div class = "middle-column">
Middle column
</div>
<div class = "right-column">
Right column
</div>
</div>P.S.
Сетка CSS — это еще более продвинутая техника (как было предложено в комментариях). Он хорошо поддерживается современными браузерами, но имеет ограниченную функциональность в Internet Explorer.
CSS-Grid поддерживается всеми браузерами, за исключением древнего Internet Explorer. И на самом деле для макета с 3 столбцами, как здесь, он был бы даже короче. Все, что вам нужно добавить для CSS, это: body { display: grid; grid-template-columns: repeat(3, 1fr); } Тогда вам не нужно определять ширину дочерних элементов. Или для обмена образцами body с .flex-row
Обновлено примечание о поддержке сетки.
чтобы сократить код CSS, вы можете добиться того же результата с помощью: .flex-row { display: flex; flex-direction: row; } .flex-row div { width: 33%; }
Синтаксическая ошибка в
text-align: center width: 33%;. Не хватает точки с запятой.