Как сделать вертикальную линию с рисунком между адаптивными блоками?
.row{ display: flex; flex-wrap: wrap; height: 100%; justify-content:center; } .col1 { width:300px; float:left; box-shadow: inset -1px 0 0 black; padding-right:20px; } .col2 { width:300px; float:left; margin-left:20px; } .romb { padding-left:101%; padding- top:-3px; content:''; display:block; margin-top: -5px; } .romb_2 { margin-left: -37px; content:''; display:block; } <div class="row"> <div class="col1"> <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb"></div> <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.</div> </div> <div class="row"> <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.<div> </div></div> <div class="col2"> <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb_2"> </div> </div> |
.row{ display: flex; flex-wrap: wrap; height: 100%; justify-content:center; } .col1 { width:300px; float:left; box-shadow: inset -1px 0 0 black; padding-right:20px; } .col2 { width:300px; float:left; margin-left:20px; } .romb { padding-left:101%; padding- top:-3px; content:''; display:block; margin-top: -5px; } .romb_2 { margin-left: -37px; content:''; display:block; } <div class="row"> <div class="col1"> <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb"></div> <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.</div> </div> <div class="row"> <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.<div> </div></div> <div class="col2"> <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb_2"> </div> </div>
snippet
Если делаешь ширину блока в процентах, то все ломается.
Дополнительно:
Для чего float ?
В romb_2 не будет работать content
Для чего float ?
Случайно затесался
copy-paste от romb
В зависимости от количества элементов псевдо можно делать как самим элементам, так и родителю.
Если элемента 2 или 3, то удобнее родителю и размещать гридами или флексами, а не абсолютом.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания вертикальной линии с рисунком между адаптивными блоками на веб-странице можно использовать псевдоэлементы CSS. В данном примере я покажу, как создать вертикальную линию с изображением между двумя блоками с помощью CSS.
Прежде всего, добавим HTML-код для двух адаптивных блоков:
<div class="block block1">Block 1</div> <div class="block block2">Block 2</div>
Теперь добавим стили CSS для создания вертикальной линии с рисунком:
.block { display: inline-block; width: 45%; padding: 20px; text-align: center; } .block1 { background-color: #f1f1f1; } .block2 { background-color: #e9e9e9; } .block::after { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; width: 2px; height: 100%; background-image: url('vertical-line.png'); /* Путь к изображению вертикальной линии */ }
В данном коде мы создаем два блока с классами "block1" и "block2". Для каждого блока задаем ширину, отступы и цвет фона. Затем мы используем псевдоэлемент "::after" для создания вертикальной линии между блоками. Устанавливаем позицию абсолютно, чтобы линия занимала всю высоту блока, и добавляем изображение вертикальной линии в качестве фона.
Не забудьте заменить 'vertical-line.png' на путь к вашему изображению вертикальной линии. Также вы можете настроить стили блоков и линии под свои потребности, изменяя ширину, цвет, отступы и другие параметры.
Таким образом, вы создадите вертикальную линию с рисунком между адаптивными блоками на вашей веб-странице.