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

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 的宽度。 菜名可以比“菜名”更长。 Any1对此有解决方案吗？

编辑 价格和名称位于 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 左边的浮动头，右边的浮动价格，以及下面的说明。 我需要在 head 和 Price 之间有一个 div，而不影响它所在的​​整个 div

Answer 1

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

为了回答您的问题，让第三个 div 占据左右 div 之间的剩余空间，您将在其上使用 overflow:hidden ，因此使用虚线边框的示例可能如下所示：

< a href="http://jsfiddle.net/clairesuzy/Q6WAx/" rel="nofollow noreferrer">示例 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"> </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

您可以在带有菜肴名称的元素中放置很多点，并使用以下 css：

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