html - Css float 第三个元素，其内容取决于宽度

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

编辑 价格和名称在 2 个 div 中，上面已经有 float

.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;
}

编辑2: 整个结构如下:

向右或向左浮动的div 左浮动头，右浮动价格，下面有说明。 我需要在 head 和 price 之间有一个 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>