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

这是因为<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>

Answer 2

如果将它们显示为表格单元（使用display:table-cell CSS），将会使事情变得简单。我没有换蓝色，而是关注您的职位问题。

如果您想要的是一列最左对齐，另一列最右对齐（或者都接近100％-不完全是100 cos，则您可以负担得起使列具有不同的宽度）填充/边距）。但我会留给您处理。我在票证详细信息周围放置了跨度标签，以更好地控制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>

字幕标签内的多个div

2 个答案: