CSS плавающий третий элемент с содержанием в зависимости от ширины - PullRequest
Новая
       11

CSS плавающий третий элемент с содержанием в зависимости от ширины

1 голос
/ 30 июня 2011

Я делаю меню для ресторана, которое они динамически добавляют.это выглядит так: 

Dish Name                                            Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.

Что я хочу сделать, это сделать пунктир пустым, с.или пунктирная граница.Но я не могу понять, как заставить CSS автоматически настроить ширину пустого пространства div.Имена блюд могут быть длиннее, чем «блюдо».Any1 есть решение для этого?

РЕДАКТИРОВАТЬ Цена и имя уже в 2 делениях с плавающей точкой на них 

.dishHead 
{
font-family:Verdana;
font-size: 18px;
color:#262626;  
float:left;
font-weight:200;
}

.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;  
float:right;
}

Edit2: все структурировано, как показано ниже:

div, который плавает прямоили левая плавающая головка, правая плавающая цена и описание ниже.Мне нужно деление между головой и ценой, не затрагивая весь деление, в котором оно находится

Ответы [ 2 ]

2 голосов
/ 30 июня 2011

Я думаю, что я сделал бы это с фоновым изображением для всей части «заголовка», а затем использовал бы цвет фона для названия и div цены, чтобы покрыть изображение, однако это будет работать, только если фон имеет простой цвет.

В ответ на ваш вопрос, чтобы получить третий делитель, который будет занимать оставшееся пространство между левым и правым делением, вы должны использовать overflow:hidden, поэтому пример с пунктирной рамкой может выглядеть так:

Пример Fiddle

CSS: 

.dishHead {
  font-family:Verdana;
  font-size: 18px;
  color:#262626;  
  float:left;
  font-weight:200;
}

.dishPrice {
  font-family:Verdana;
  font-size: 14px;
  color:#262626;  
  float:right;
}

.spacer {
  overflow: hidden;
  border-bottom: 3px dotted #000;
}

HTML: 

<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer">&nbsp;</div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>
0 голосов
/ 30 июня 2011

Вы можете разместить множество точек в элементе с именем блюда и использовать следующие css: 

.dishname { 
   width:400px;
   overflow:hidden; 
   white-space:nowrap;
}
...