Блог

Я привел это ниже html

 str ="<div class='label' date1='" a "' date2='" a1 "' id='mydiv'> Start Date " a;
str ="End Date " a1;
  

Теперь я хочу, чтобы дата 1 была выровнена по левому краю страницы, а дата 2 должна быть выровнена по правому краю страницы.

Как это сделать?

С уважением

Упростите это с flexbox помощью и pseudo elements .

 #mydiv {
  display: flex;
  justify-content: space-between;
}
#mydiv::before {
  content: "Start Date: " attr(date1);
}
#mydiv::after {
  content: "End Date: " attr(date2);
}  

 <div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"></div>  

Итак, ваш код будет выглядеть следующим образом:

 str ="<div class='label' date1='" a "' date2='" a1 "' id='mydiv'></div>";
  

Попробуйте так: Демо

CSS:

 .fl{ float:left; }
.fr{ float:right; }
.label{ clear:both; }
  

HTML:

 <div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv">
    <span class="fl">Start Date 10/5/2016</span> 
    <span class="fr">End Date 10/20/2016</span>
</div>
  

Это сэкономит ваше время

///HTML

 <div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"><div style = 'float:right'>End Date 10/20/2016
</div>
</div>Start Date 10/5/2016></div>
  

Живая демонстрация: https://jsfiddle.net/c6wnsob6/3 /

перенесите даты span и добавьте css, как показано ниже

 <div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv">
    <span class="float-left">Start Date 10/5/2016</span>
    <span class="float-right">End Date 10/20/2016</span>
</div>
  

CSS

 .float-left{float:left;}
.float-right{float:right;}
  

попробуйте это codepen codepen..

Я заключил две даты в два интервала и использовал элементы span для выравнивания по ширине, а для первого элемента я начинал слева, а для второго элемента начинал справа. display: inline-block; text-align: left; text-align: right;

Примечание: я указал max-width: 800px; родительский элемент, но вы можете указать свою ширину или удалить.

используйте float:left и float:right для дат.

 .label {
  width: 100%;
  height: auto;
  max-width: 800px;
}
.date-1 {
  width: 50%;
  text-align: left;
  float:left
}
.date-2 {
  width: 50%;
  text-align: right;
  float:right;
}  

 <div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"><span class="date-1">Start Date 10/5/2016</span><span class="date-2">End Date 10/20/2016</span></div>  

Вы можете поместить обе даты в тег span или p и сделать один элемент плавающим слева, а другой справа.

ОБНОВЛЕНО в соответствии с вашим кодом

  $str .="<div class='label' date1='".a."' date2='".a1."' id='mydiv'><span style='float:left'> Start Date ". a.'</span>';
$str.="<span style='float:right'>End Date ".a1.'</span>';