css - 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);
});