Question

我在html下面这个

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

现在我希望date1应该与页面左对齐，而date2应该与页面对齐。

怎么做？

此致

Answer 1

请尝试以下操作： 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>

Answer 2

使用flexbox和pseudo elements简化。

＆＃13;

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

＆＃13;

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

＆＃13;

所以，你的代码将是这样的：

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

Answer 3

这会节省你的时间

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

Answer 4

将日期换行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;}

Answer 5

试试这个codepen codepen ..

我在两个跨度中包装了两个日期，并使用display: inline-block;与span元素对齐以与宽度对齐，对于我使用text-align: left;从左开始的第一个元素和使用的第二个元素{{ 1}}从右边开始。

注意：我将text-align: right;提供给父元素，但您可以给出宽度，也可以删除。

Answer 6

您可以将这两个日期放在 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>';

Answer 7

使用float：left和float：右边的日期。

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

对齐div标签中的文本

7 个答案: