html - 标题标签内的多个 div

Question

我试图将一个caption区域分成2个div，每50%，将文本在左边div上对齐并对齐文本在另一个右边。 我不太能得到我想要的结果，我该如何解决这个问题？

.tcaption {
  width: 100%;
  background-color: #cee7ff;
}

.tcaption-left-part {
  color: blue;
  width: 50%;
  float: left;
  text-align: left;
  padding: 5px 0 5px 0;
  font-weight: bold;
}

.tcaption-right-part {
  color: blue;
  width: 50%;
  float: right;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-wrapper">
  <table class="ticket-table">
    <caption class="tcaption">
      <div class="tcaption-left-part">
        Ticket Details
      </div>
      <div class="tcaption-right-part">
        <a class=" btn btn-default " href="{% url 'ticket_edit' ticket.pk %} "><i class="fa fa-edit fa-2x "></i></a>
      </div>
    </caption>
    <tbody>
      <tr>
        <td>Ticket Number:</td>
        <td>{{ticket.pk}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

如果您将这些显示为表格单元格(使用 display:table-cell css)，事情会变得更容易。我没有换成蓝色，而是专注于你的位置问题。

如果您想要的是一列最左对齐而另一列最右对齐(或者两者都接近 100% - 不是 100 cos填充/边距)。但我会留给你去捣乱。我在工单详细信息周围放置了 span 标签，以便更好地控制 CSS。

.ticket-table, .tcaption {
  width: 100%;
  background-color: var(--myBlue3);
}


.tcaption .left-part,
.tcaption .right-part {
  display: table-cell;
  width: 50vh;
  color: var(--myBlue6);
  vertical-align:top;
}

.left-part, .left-part span {
  text-align: left;
  padding: 5px 0 5px 0;
  font-weight: bold;
  float:left;
}

.right-part, .right-part a {
  text-align: right;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>



<div class="form-wrapper">
  <table class="ticket-table">
    <caption class="tcaption">
      <div class="left-part">
        <span>Ticket Details</span>
      </div>
      <div class="right-part">
        <a href='#' class="btn btn-default"><i class="fa fa-edit fa-2x">Ticket.pk</i></a>
      </div>
    </caption>
    <tbody>
      <tr>
        <td>Ticket Number:</td>
        <td class="right-part">{{ticket.pk}}</td>
      </tr>
    </tbody>
  </table>
</div>