3个div，中间div需要是一个可变长度的虚线

Question

我想创建一个餐厅风格的菜单卡。

我不想使用表格。我试图仅使用DIV来完成此任务。

这就是我所拥有的：

.review-row {  // (1)
    padding: 0;
}

.review-cat {  // (2)
    font-size: 25px;
    float: left;
}

.review-dots {  // (3)
    padding-bottom: 5px;
    float: left;
}

.review-dots-inner {  // (3)
    height: 5px;
    border-bottom: 3px dotted #E65540;
}

.review-rating {  // (4)
    float: right;
    font-size: 50px;
}

在图像中认为（3）为2 DIVS，内部div用于获得与文本在同一基线上的点。

现在这不起作用。怎么办？

• 所有DIV应根据内容调整宽度
• 中间DIV需要充当“填充物”

Answer 1

你不需要图像.. 见工作example here ..

执行以下操作..

 <!--Markup and styles-->
<div class="item-container">
    <span class="item">Quality</span>
    <span class="fill"></span>
    <span class="score">8.0</span>
</div>
<div class="item-container">
    <span class="item">Presentation</span>
    <span class="fill"></span>
    <span class="score">9.5</span>
</div>
<style>
    .item-container{
    width:200px;
    /*border:1px solid #AAA;*/
    display:block;
    padding:5px;
    margin:2px;    
}

.item{
    float:left;   
    margin:2px; 
}
.score{
    float:right;
    margin:2px;
}
.fill{
    border:none;
    border-bottom:1px dotted #000;
    display:inline-block;
}
</style>

并在$().ready()

中执行此操作

$('.item-container').each(function(){
    //alert($('.fill', $(this)).width());
    var item = $('.item', $(this));
    var score = $('.score', $(this));
    var itemWidth = item.width();
    var scoreWidth = score.width();

    var offset1 = item.offset().left;
    var offset2 = score.offset().left;
    var fillerWidth = (offset2 - offset1) - (itemWidth + scoreWidth);

    $('.fill', $(this)).css('width', fillerWidth + 10);
});

Answer 2

您可以将点设置为重复背景，然后为.review-cat和.review-rating添加白色（或其他）背景。

这样你就可以继续前进，将等级浮动到右边，确保它在html之前的第一个（2）浮动到左边。

background-color: white;是您需要做的事情

对于.review-row，您需要将点添加为重复背景 background: transparent url(../images/dots.png) repeat 0 0;

祝你好运

Answer 3

使用Flexbox轻松:)。见工作example here ..

<div class="row">
  <div class="text-box">Breakfast</div>
  <div class="dots-box"></div>
  <div class="text-box">8:30 am - 9:30 am</div>
</div>

CSS

.row{
  display: flex;
  overflow:hidden;
  padding:15px;
  width:90%;
}
.text-box{
  flex: 0 0 auto;
}
.dots-box{
  flex: 1 1 auto;
  position: relative;
}
.dots-box:before{
  position:absolute;
  bottom: 5px;
  width: 94%;
  border-bottom: 1px dotted #000;
  content: '';
  left: 3%;
}