Вопрос о переполнении: скрыт - PullRequest
Новая
       11

Вопрос о переполнении: скрыт

0 голосов
/ 14 февраля 2009

У меня есть два div с плавающей точкой: справа: 

<div id="container" style="width:760px">
  <div id="d1" style="float:right;"></div>
  <div id="d2" style="float:right;"></div>
</div>

Я хочу скрыть любое переполнение в d2, если содержимое обоих div становится слишком широким, чтобы поместиться в их контейнере (все это должна быть одна строка, которая не должна переноситься на вторую строку). Как вы уже догадались, ширина содержимого не является фиксированной, и, как вы знаете, переполнение: скрытый не работает, если ширина не указана.

Заранее спасибо за любые предложения ...

Edit: Прочитав комментарий Таркуна, я подумал, что, вероятно, должен уточнить, чего я хочу добиться, поэтому я создал этот черновик:

http://www.waleedeissa.com/temp/css-problem.gif

Как вы можете видеть на изображении выше, у меня есть меню участника (ссылки в меню участника время от времени немного различаются - для уведомления участника о некоторых событиях), также, как вы видите на изображении, участник Имя отображается рядом с меню, так как имя члена выбирается участником, оно варьируется по ширине от одного члена к другому, и я беспокоюсь, что оно может стать слишком широким для некоторых участников, что приведет к отображению имени члена ниже меню не слева от него, поэтому, если имя элемента слишком длинное, я хочу скрыть его часть (используя overflow: hidden), чтобы оно умещалось в одной строке.

Ответы [ 2 ]

1 голос
/ 14 февраля 2009

Вы можете попробовать что-то вроде: 

#d2 {
    height: 1em;
    overflow: hidden;
}

Но вы уже указали, что это может не сработать.

Во всяком случае, это не то, что я когда-либо пробовал бы, потому что вы должны указывать width при перемещении элемента.

Другим решением было бы использование javascript для динамического вычисления и установки ширины.

Редактировать: Другим решением было бы установить выравнивание текста: вправо для вашего контейнера и отображение: встроенное для d1 и d2. Таким образом, вы можете попробовать стиль d2 без нарушения стандартов CSS.

Третье решение: Вы также можете попытаться позиционировать абсолютный элемент MemberName внутри d1 или d2 (левый). Таким образом, вы можете задать d1 / d2 фиксированную ширину (= хорошо для поплавка), и MemberName автоматически выйдет из экрана слева.

0 голосов
/ 14 февраля 2009

Попробуйте это: 

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .container { border: 1px solid black; overflow: hidden; white-space: nowrap; text-align: right; }
    .container div { display: inline; }
    .d1 { background: yellow; }
    .d2 { background: #DDD; }
  </style>
</head>
<body>
<table>
<div class="container" style="width:300px">
  <div class="d1">this is the content of the first div</div>
  <div class="d2">this is the content of the second div</div>
</div>
<div class="container" style="width:300px">
  <div class="d1">first div</div>
  <div class="d2">second div</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...