5

Есть текст: условное расписание. К примеру:

  • Пн-Сб ........ 8
  • 19 Вс .......... Выходной

Нужно с помощью css и/или js сделать так, чтобы точки располагались между текстом, причём они не должны быть дефолтными (круглыми), а квадратными, определённого цвета(не цвета текста), размера и с определённым отступом между собой. При это при всём эта конструкция должна быть адаптивной, т.е. при сужении кол-во точек должно изменяться так, чтобы текст в правой части оставался на одной линии.

Я не прошу писать за меня код, я прошу лишь дать совет, в какую сторону копать. Пока есть вот такая мысль: сделать обёртку и запихать туда текст по краям, с помощью float'ов, а между затолкать какой-то блок и с помощью фона и его repeat'а заполнить точками. Но как сделать его всегда нужной ширины не понятно.

Спрашиваю тут потому, что уверен, что эта задача тривиальная и уже наверняка имеет красивое решение.

3
  • Я бы попробовал сделать используя flex-box , там проще реализовать адаптивность , чем с флоатами.
    – MoJlo4HuK
    14 июн 2017 в 7:17
  • 1
    можно посмотреть в сторону border - dotted
    – Grundy
    14 июн 2017 в 7:35
  • Я обновил ответ под регулировку расстояний.
    – Qwertiy
    14 июн 2017 в 9:35

5 ответов 5

5

Просто dotted:

div:first-child {
  float: left;
}

div:last-child {
  float: right;
}

section {
  overflow: hidden;
}

section:after {
  content: "\A0";
  display: block;
  overflow: hidden;
  border-bottom: 3px dotted red;
  margin-top: -6px;
}

div:first-child:after, div:last-child:before {
  content: "";
  display: inline-block;
  width: .25em;
}
<section>
  <div>123</div>
  <div>456</div>
</section>

С регулируемыми расстояниями:

div:first-child {
  float: left;
}

div:last-child {
  float: right;
}

section {
  overflow: hidden;
  line-height: 1.2em;
}

section:after {
  content: "";
  display: block;
  overflow: hidden;
  padding-top: 1em;
  height: 3px;
  box-sizing: content-box;
  background: repeating-linear-gradient(to right, red, red 3px, transparent 3px, transparent 9px);
  background-clip: content-box;
}

div:first-child:after, div:last-child:before {
  content: "";
  display: inline-block;
  width: .5em;
}
<section>
  <div>123</div>
  <div>456</div>
</section>

9
  • а отступы между точками? 14 июн 2017 в 8:17
  • @RazmikGalstyan, а что с ними? Если речь про отступы от текста до точек, тот можно добавить div:first-child:after, div:last-child:before.
    – Qwertiy
    14 июн 2017 в 8:21
  • Вот цитата из вопроса и с определённым отступом между собой, я про это 14 июн 2017 в 8:22
  • @RazmikGalstyan, ой.. не обратил внимания. Ну значит через background. Потом дополню.
    – Qwertiy
    14 июн 2017 в 8:22
  • Интересно мне то же как будет))) 14 июн 2017 в 8:23
0

Первое, что пришло на ум :)

P.S не очень красивое решение.

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.dayOfWeek {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}

.dayOfWeek span:after {
  content: ' .................................';
}
<div class="row">
  <div class="cell dayOfWeek"><span>Пн-Сб</span></div>
  <div class="cell"><span>8-19</span></div>
</div>
<div class="row">
  <div class="cell dayOfWeek"><span>Вс</span></div>
  <div class="cell"><span>Выходной</span></div>
</div>

0

например:

dl {
    width: 100%;
    overflow: hidden;
}

dt {
    width: 80%;
    float: left;
    overflow: hidden;
    margin: 0px;
}

dd {
    width: 20%;
    float: right;
    overflow: hidden;
    margin: 0px;
}

dt span {
  display: block;
  white-space: nowrap;
}

dt span:after {
    content: " ................................................................................................................................................................................................................................................................";
}
<dl>
  <dt>
    <span>ПН-СБ</span>
  </dt>

  <dd>
    8
  </dd>
</dl>
  <dl>
  <dt>
    <span>19 ВС</span>
  </dt>

  <dd>
    Выходной
  </dd>
</dl>

0

Может так?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b {}

.b-inner {
  border: 4px solid #ccc;
  display: table;
  width: 100%;
}

.b-item {
  display: table-cell;
  vertical-align: middle;
  padding: 15px;
  white-space: nowrap;
}

.b-item:nth-of-type(1) {
  padding-right: 5px;
}

.b-item:nth-of-type(2) {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.b-item:nth-of-type(3) {
  text-align: right;
  padding-left: 5px;
}

.b-dotted {
  background-image: linear-gradient(to right, #f00 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 8px 4px;
  background-repeat: repeat-x;
  width: 100%;
  height: 4px;
  margin-top: 7px;
}

.b-dotted-theme-blue {
  background-image: linear-gradient(to right, #00f 40%, rgba(255, 255, 255, 0) 20%);
  background-size: 8px 4px;
}
<div class="b">
  <div class="b-inner">
    <div class="b-item">
      Пн-Сб
    </div>
    <div class="b-item">
      <div class="b-dotted"></div>
    </div>
    <div class="b-item">
      8
    </div>
  </div>
  <div class="b-inner">
    <div class="b-item">
      19 Вс
    </div>
    <div class="b-item">
      <div class="b-dotted b-dotted-theme-blue"></div>
    </div>
    <div class="b-item">
      Выходной
    </div>
  </div>
</div>

0

Вот я реализовал вариант с js, Здесь можно вставить контент под свой вкус. Я поставил круг(\u25CF) но это можно менять. И расстояния то же, они пробелами(\u00a0) разделены, и можно менять их количество.

<style>
    
    .mysection div:first-child {
        float: left;
      }

    .mysection div:last-child {
      float: right;
    }

      .mysection {
        overflow: hidden;
        text-align: center;
      }

      .mysection::after {
        content: attr(data-content);
        display: inline-block;
        overflow: hidden;
        margin-top: -1px;
        color: red;
      }

      .mysection div:first-child:after, .mysection div:last-child:before {
        content: "";
        display: inline-block;
        width: .25em;
      }
    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    
    function addAfterContent(afterSelector, selectorClass){
        afterSelector.attr('data-content',"\u25CF\u00a0\u00a0");
        
        
        var section = document.getElementsByClassName(selectorClass)[0];
        var result   = parseFloat(getComputedStyle(section, ':after').width);
        
        var after_width = afterSelector.width() - afterSelector.find('>div:first-child').width() - afterSelector.find('>div:last-child').width();
        
        var after_count = parseInt(after_width/result)+1;
        
        var content_str = '';
        for(i = 1; i < after_count; i++){
            content_str = content_str + "\u25CF";
            if(i !== after_count - 1)
                content_str = content_str + "\u00a0\u00a0";
        }
        
        afterSelector.attr('data-content', content_str);

    }
    
    $(window).load(function(){
        addAfterContent($('.mysection'), 'mysection');
    });
    $(window).resize(function(){
        addAfterContent($('.mysection'), 'mysection');
    });
</script>
<div class="mysection">
  <div>123</div>
  <div>456</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.