Question

我正在为他们动态添加的餐馆做菜单。看起来像这样

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的宽度。 dishnames可能比“dishname”更长。 Any1有解决方案吗？

EDIT 价格和名称已经有2个div，已经浮动了

.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 左浮动头，右浮动价格和下面的描述。我需要头部和价格之间的div而不影响它所在的整个div

Answer 1

我想我会在整个“标题”部分使用背景图像，然后在名称和价格div上使用背景颜色来覆盖图像，但这只有在背景为纯色时才有效。

在回答你的问题以获得第三个div以占用左右div之间的剩余空格时，你会在其上使用overflow:hidden，所以使用虚线边框的示例可能如下所示：

Example 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>

Answer 2

你可以在一个带有dishname的元素中放置很多点并使用fallowing css：

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

Css浮动第三个元素，其内容取决于宽度

2 个答案:

Example Fiddle