Как соединить 2 блока в 1 и убрать часть border?
Всем привет, уже были подобные вопросы, но внутри небыло текста, что более проще.
Как сверстать такой блок:
?
- Вопрос задан более трёх лет назад
- 1578 просмотров
Комментировать
Решения вопроса 2
Просто так, бордерами вы не сделаете, либо нужно добавить третий вспомогательный блок (ниже на картинке), либо добавить к блоку, который вверху слева, псевдокласс ::after и с помощью него скрыть границу, то есть зарисовать таким же цветом, как и фон страницы. Но тогда верхний блок должен быть фиксированной высоты.
Вот такой вариант с псевдоэлементом: https://jsfiddle.net/cchnc6t7/
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
HTML: Объединение ячеек внутри строк и столбцов
В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла постоянно дублировать информацию — её можно объединить и написать, что товара нет на складе:
| Товар | Цена | Количество |
|---|---|---|
| Чай | Нет на складе | |
В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan . Их значениями является количество ячеек справа (для colspan ) или снизу (для rowspan ), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan=»2″ , то будет объединена текущая ячейка с соседней.
Разметка для примера выше без учёта объединения ячеек будет следующей:
Товар Цена Количество Чай Нет на складе
Для того чтобы объединить ячейки, нужно сделать два действия:
1. В тег ячейки, которую будем объединять, добавить атрибут colspan со значением, равным количеству объединяемых ячеек справа
2. Удалить лишние ячейки из строки
Товар Цена Количество Чай Нет на складе
Для объединения ячеек по вертикали используется атрибут rowspan . Алгоритм действий повторяет аналогичный при объединении по горизонтали. Единственное отличие — удалять ячейки нужно в соседних строках:
Сотрудник Зарплата Бонусы Менеджер Алексей Примадонин 750$ 63$ Кодовёнок Хекслетович Вениамин Редакторович 1200$ 0
В примере двое сотрудников взаимодействуют с одним менеджером. Можно указать его дважды, но нагляднее объединить ячейки по вертикали. Для этого был добавлен атрибут rowspan=»2″ , а во второй строке удалена четвёртая ячейка, так как её место займёт ячейка выше
| Сотрудник | Зарплата | Бонусы | Менеджер |
|---|---|---|---|
| Алексей Примадонин | 750$ | 63$ | Кодовёнок Хекслетович |
| Вениамин Редакторович | 1200$ | 0 |
Задание
Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Как «склеить» два блока?
Вопрос, собственно, несложный. Видел на различных сайтах, как два блока очень плотно прилегают друг к другу («склеиваются»). Но проблема в том, что таблица:
table cellspacing = "0"> . /table>
меня не устраивает, ибо требуются именно div’ы. Имеем следующее:
div class = "test"> DIV0 /div> div class = "test"> DIV1 /div>
1 2 3 4 5 6 7 8 9 10 11 12 13
body{ background : rgb( 100, 100, 100 ); margin : 100px; // Добавил, чтобы легче было сделать скрин padding : 0px; } .test{ display : inline-block; background : rgb( 150, 150, 150 ); border : rgb( 0, 0, 0 ) 2px solid; padding : 0px; margin : 0px; }
Но результат получается следующий и «зазор» между блоками все же имеется. Я не гуру в CSS и мне не сильно хочется перелопачивать кучу ненужной информации, чтобы найти очевидное решение. Если вам не трудно, помогите пожалуйста!)
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как растянуть два блока до footer?
Собственно говоря, попробывал достаточно много вариантов, но ничего не помогло. Основная.
Как расположить вертикально два блока?
Как расположить эти два блока один под одним, чтобы надпись была у левого края? Как будто.
Как поставить два блока рядом
div же с новой строки начинает всегда. Как поставить два блока рядом? На каждый вопрос.
Как разместить два input по сторонам блока
Есть два input которые находятся в блока div, нужно чтобы один был с левая второй с правая.
Как растянуть два блока до краев экрана?
Привет! Как растянуть эти два блока до краев экрана, как на скрине.
Как соединить два блока div?
как склеить два блока? только начал верстать, новичок.
.info-block < border-top-right-radius: 50px; border-bottom-right-radius: 50px; flex: 10%; background-color: #cabcbc; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; >.social_links < width: auto; background-color:white; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; display:flex; align-items: center; >.btn
Отслеживать
задан 17 дек 2021 в 13:33
sssatybaldinnn sssatybaldinnn
11 6 6 бронзовых знаков
Попробуйте изучить модель блока (в нашем случае, либо div, либо элемент сверху, к которому соединяемся), чтобы понять, почему он не хочет соединяться. Находится в «Вычисленные» справа в веб-инспекторе
17 дек 2021 в 13:36
Проблема в inline-потоке. Удалите лишние пробелы между тегами.
17 дек 2021 в 13:43
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
в .info-block сделайте font-size: 0px; пропуск возникает из-за перевода строки и кучи пробелов в кода:
.info-block < border-top-right-radius: 50px; border-bottom-right-radius: 50px; flex: 10%; background-color: #cabcbc; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-size: 0px; >.social_links < width: auto; background-color:white; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; display:flex; align-items: center; >.btn
Отслеживать
ответ дан 17 дек 2021 в 13:42
37.1k 4 4 золотых знака 26 26 серебряных знаков 69 69 бронзовых знаков
если сделать font-size: 0px; то весь текст пропадает, тогда info-block и social_links в отдельный div закинуть?
17 дек 2021 в 13:54
ну так для дочерних блоков выставить размер шрифта просто
17 дек 2021 в 14:35
Попробуйте прописать в стилях это:
Отслеживать
ответ дан 25 дек 2021 в 2:23
82 8 8 бронзовых знаков
- html
- css
- html5
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.