Несколько 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 вокруг Ticket Details для лучшего контроля 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>

Answer 2

Это потому, что <caption> только такой большой, как его родитель <table>. Увеличьте width <table>, и вы получите то, что хотите.

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

table {
  width: 100%;
}

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

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

<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"><i class="fa fa-edit fa-2x">Right Aligned Text</i></a>
      </div>
    </caption>
    <tbody>
      <tr>
        <td>Ticket Number:</td>
        <td>{{ticket.pk}}</td>
      </tr>
    </tbody>
  </table>
</div>