Align текст в Div теги

-1

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

Теперь я хочу date1 должны быть выровнены слева на странице и date2 должны быть выровнены прямо на страницу.

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

С уважением

источник

2016-10-10 learningmode

обернуть дату окончания с '' поверочного тег и сделать его 'поплавка: right'. установите ширину 'div' до 100%. –

Сделать это просто с 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>";

источник

2016-10-10 05:52:25

Это спасет ваше время

/// 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/

источник

2016-10-10 05:27:01 alex1997

завернуть даты в 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;}

источник

2016-10-10 05:29:10

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

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>

источник

2016-10-10 05:30:01

попробовать это codepen codepen ..

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

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

источник

2016-10-10 05:35:37

Спасибо .. На самом деле я создаю динамическую метку при нажатии. Так можете ли вы сказать мне, как выровнять те теги. Я обновил свой код. – learningmode

при создании ярлыка динамически создает элементы span тоже в то же время, что и дочерние. –

Вы можете поставить обе даты в пролете или р тег и сделать один элемент поплавок налево и другой направо.

ОБНОВЛЕНО согласно кода

$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>';

источник

2016-10-10 05:38:12 smarttechy

В соответствии с обновленным кодом, как конкатенировать тег span с помощью str + ... – learningmode

@learningmode посмотреть сейчас. Я просто использовал ваш путь, как вы использовали +, так что просто пошел с этим потоком, забыв его, что его неправильный путь – smarttechy

Я получаю ошибку ---- Uncaught SyntaxError: Неожиданный токен = – learningmode

использовать поплавок: левый и плавать: право на свидания.

.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>

источник

2016-10-10 05:46:08 Dhaarani

@learningmode проверьте выше код. – Dhaarani

Align текст в Div теги

ответ

Смежные вопросы