Прижать, правый блок к левому, левый выполнить по ширине ссылок - HTML и CSS

Zuldek · 02.08.2025, 00:53

Код:

<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.width {
  width: 630px;
  border:2px solid red;
  padding:10px;
  display:flex;
  > div {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #000;
    border: 1px solid black;
    overflow: hidden;
    margin-right: 10px;
    > a {
        display: inline-block;
        margin-right: 10px;
    }
  }
  > div:last-of-type {background: green}
}
 
</style>
</head>
<body>
 
<div class='width'>
  <div>
    <a>Cras eleifend turpis fames</a>
    <a>Finibus facilisis</a>
    <a>Sed diam urna</a>
    <a>Dis parturient montes</a>
    <a>Ligula congue</a>
  </div>
  <div>Далее</div>
</div>
</body>
</html>

При всем желании, никак не получается выполнить таким образом. Чтобы ширина блока со ссылками, была равна ширине видимых дочерних блоков. Чтобы кнопка "Далее", была рядом со ссылками и не было пропасти

Задача состоит в том, чтобы скрывать ссылку с конца целиком, если та не помещается в ширину и соответственно сделать родителя той же ширины что все вместе взятые, видимые ссылки.

Блоки скрываются целиком, никакой высоты задать не нужно, хорошо. Как сделать?

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Прижать левый блок к центру CSS	FleXik	HTML и CSS	3	09.06.2013 16:07
3 div - центр, левый и правый Как?	KWN, lnc	HTML и CSS	2	13.03.2012 00:54
3 div - центр, левый и правый Как?	KWN, lnc	PHP	2	12.03.2012 16:04
Левый и правый Ctrl	Ewgeny Kolyaev	Общие вопросы Delphi	2	02.03.2011 22:37
Прижать левый блок максимально в низ.	rext	HTML и CSS	6	17.07.2010 13:50