3 деления, средний делитель должен быть пунктирной линией переменной длины - PullRequest
Новая
       3

3 деления, средний делитель должен быть пунктирной линией переменной длины

1 голос
/ 12 февраля 2011

Example DIV layout

Я бы хотел создать карту меню в стиле ресторана.

Я не хочу использовать таблицы. Я пытаюсь сделать это, используя только 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 должен действовать как «наполнитель»

Ответы [ 3 ]

2 голосов
/ 12 февраля 2011

Вам не нужны изображения .. См. Рабочий пример здесь ..

сделать следующее .. 

 <!--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);
});
0 голосов
/ 05 марта 2018

Легко с Flexbox :).См. Рабочий пример здесь .. 

<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%;
}
0 голосов
/ 12 февраля 2011

Вы можете установить точки в качестве повторяющегося фона, а затем добавить белый (или любой другой) фон для .review-cat и .review-rating.

Таким образом, вы можете продолжить движение, разместите рейтинг вправо, убедитесь, что он находится первым в html перед (2), который перемещается влево.

background-color: white; - это то, что вам нужно сделать

, и для строки .review вы хотите добавить точки в качестве повторяющегося фона background: transparent url(../images/dots.png) repeat 0 0;

Удачи

...