带图片背景的点领导 [英] Dot leaders with picture background

问题描述

因此，我正在为一家餐厅建立一个网站，并且我正在泡菜。我试图在那里创建菜单。想法是将食物名称与左边对齐，将价格与右边对齐并用点填充它们之间的间隙。像这样

汉堡包................................ ............ $ 4.00

XXL汉堡包................... ................. $ 4.00

奶昔............... ............................... $ 4.00

我找到了一些解决方案，只有当你有一种颜色和没有纹理的背景时才有效。这个想法是用点填充整行，并使用与网站背景相同的颜色设置名称/价格背景跨度，因此点不会显示。但是我有一张背景图。

我不会在这里发布我的代码，因为它并不重要，也不会帮助。

这甚至有可能吗？不一定只是CSS，也可以用JavaScript来完成。

解决方案

使用一些简单的javascript很容易和CSS，这里是一个小提琴： jsfiddle

关键是将包含点的div的宽度设置为列的宽度减去食物名称的宽度减去价格的宽度，并确保有足够多的点来覆盖距离，并设置溢出：隐藏的点div。

  $（。menu-row）。each（function（index ，元素）{
 var menuRowWidth = $（element）.width（）; 
 var foodItemWidth = $（element）.children（'。food-item'）。width（）; 
 var priceWidth = $（element）.children（'。price'）。width（）; 
 var $ dotFiller = $（element）.children（'。dot-filler'）; 
 var dotFillerWidth = menuRowWidth  -  foodItemWidth  -  priceWidth; 
 $ dotFiller.width（dotFillerWidth + px）; 
}）; 
  

然后将项目和点div左移，价格正确，全部位于设置宽度列内。溢出：隐藏设置为点也很重要，因为当我们在javascript中设置div的宽度时，我们希望所有额外的点都被截断。 CSS：

  .food-item {
 float：left 
} 
 
 .dot-filler {
 overflow：hidden; 
 width：0; 
 float：left; 
} 
 
 .price {
 float：right; 
} 
 
 .menu-row {
 width：400px; 
} 
  

然后按如下方式构造您的html：

 < div class =menu-row> 
< div class =food-item>牛排< / div> 
< div class =dot-filler> .................................. .................................................. ........< / DIV> 
< div class =price> $ 18.00< / div> 
< / div> 
 
< div class =menu-row> 
< div class =food-item>汉堡包< / div> 
< div class =dot-filler> .................................. .................................................. ........< / DIV> 
< div class =price> $ 8.00< / div> 
< / div> 
  

So I'm building a website for a restaurant and I'm in a pickle. I'm trying to create the menu there. The idea is to align the food name to the left, the price to the right and fill the gap between them with dots. Like this

Hamburger ............................................ $ 4.00

XXL Hamburger .................................... $ 4.00

Milkshake .............................................. $ 4.00

I found a couple of solutions, which only work if you have a background with one color and no texture. The idea was to fill the whole line with dots and set the name/price background span with the same color as the site background, so the dots wouldn't show. But I have a picture for the background.

I'm not going to post my code here, because it wouldn't really matter or help.

Is it even possible? Doesn't have to be css only, might as well be done with JavaScript.

解决方案

It's easy to do with some simple javascript and css, here's a fiddle: jsfiddle

The key is to set the width of the div that holds the dots to the width of the column minus the width of the food name minus the width of the price, and to make sure there are more than enough dots to cover the distance, and to set overflow: hidden for the dot div.

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

Then float the item and dot div left, the price right, all within a set width column. It's also important that overflow: hidden is set for the dots, because when we set the width of that div in javascript we want all extra dots to just be cut off. The CSS:

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

Then structure your html as follows:

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

这篇关于带图片背景的点领导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！