Как сделать в ряд два-три блока ссылками?

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#1 25 августа 2018 в 11:57
Здравствуйте!
Вот смотрите, имеется html-блоки на сайте.
Так как я в кодинке полный ноль, то немного не понимаю, как правильно сделать.
Подскажите пожалуйста уважаемое сообщество)))

Я хочу сделать, чтобы несколько блоков по горизонтали отображались на сайте ссылками.

Вот пример — Ссылка внутри слоя:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Слой-ссылка</title>
  6. <style>
  7. .link {
  8. width: 300px; /* Ширина слоя */
  9. height: 200px; /* Высота слоя */
  10. background: #fc0; /* Цвет фона */
  11. }
  12. .link a {
  13. display: block; /* Ссылка как блочный элемент */
  14. text-align: center; /* Выравнивание по центру */
  15. height: 100%; /* Высота на весь слой */
  16. color: #666; /* Цвет ссылки */
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="link">
  22. <a href="1.html">Ссылка</a>
  23. </div>
  24. </body>
  25. </html>
Хорошо, с этим более менее понятно, но а как сделать, чтобы таких блоков было, допустим, два в строке?
Вот есть код, чтобы выставить пару блоков ДИВ по горизонтали — Как расположить несколько блоков div в ряд:

  1. <!-- ------- установим стили блока DIV -------- -->
  2. <style>
  3. #line_block {
  4. width:110px;
  5. height:50px;
  6. background:#f1f1f1;
  7. float:left;
  8. margin: 0 15px 15px 0;
  9. text-align:center;
  10. padding: 10px;
  11. }
  12. </style>
  13. <!-- ---------- вставим блоки на страницу --------- -->
  14. <div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->
  15.  
  16. <div id="line_block">DIV 1</div>
  17. <div id="line_block">DIV 2</div>
  18. <div id="line_block">DIV 3</div>
  19. <div id="line_block">DIV 4</div>
  20. <div id="line_block">DIV 5</div>
  21. <div id="line_block">DIV 6</div>
  22.  
  23. <div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->
Как сделать, чтобы каждый блок стал ссылкой полностью, но в ряд, то есть два, три блока с ссылками по горизонтали?
Подскажите пожалуйста кто-нибудь))) zst
#2 25 августа 2018 в 13:36

Как сделать, чтобы каждый блок стал ссылкой полностью

skewes
Сделать ссылкой можно либо текст, либо картинку.
У Вас там что в этих блоках будет?
#3 25 августа 2018 в 14:03
Я делал тремя столбцами так:
<div style="float: left; width: 100%">
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки первого столбца</a></p>
</div>
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки второго столбца</a></p>
</div>
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки третьего столбца</a></p>
</div>
</div>
#4 25 августа 2018 в 14:12
Ris, я хочу блок просто залить одним цветом и сделать его, весь блок, ссылкой.
В блоке также будет текст)))
Melon, спасибо большое, сейчас гляну)))
#5 25 августа 2018 в 14:13
  1.  
  2. <!-- ------- установим стили блока DIV -------- -->
  3. <style>
  4. #line_block {
  5. width:110px;
  6. height:50px;
  7. background:gray;
  8. float:left;
  9. margin: 0 15px 15px 0;
  10. text-align:center;
  11. padding: 10px;
  12. color:#fff;
  13. }
  14.  
  15. #line_block:hover { background:green; }
  16.  
  17. #line_block:active {
  18. position: relative;
  19. background-color: red;
  20. }
  21. </style>
  22.  
  23. <!-- ---------- вставим ссылки на страницу --------- -->
  24.  
  25. <a href="https://url1" id="line_block">ДИВ 1</a>
  26. <a href="https://url2" id="line_block">ДИВ 2</a>
  27. <a href="https://url3" id="line_block">ДИВ 3</a>
  28. <a href="https://url4" id="line_block">ДИВ 4</a>
  29. <a href="https://url5" id="line_block">ДИВ 5</a>
  30. <a href="https://url6" id="line_block">ДИВ 6</a>
  31.  
xhtml.ru/instr/html_editor/
#6 25 августа 2018 в 14:34

чтобы несколько блоков по горизонтали отображались на сайте ссылками

skewes
Вот еще, чтобы именно див был ссылкой

© если тебе надо из чего либо сделать ссылку… то это что-то нужно обернуть тегом: <a>


  1. <a href="ссылка"><div id="line_block">DIV 1</div> </a>
#7 25 августа 2018 в 15:03
Всем огромное спасибо!!!
Разобрался)))
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.