Question

我制作了这段代码：

<style>
.left-cell {
display:table-cell;
vertical-align:middle;
}
.right-cell {
display:table-cell;
vertical-align:middle;
text-align:right;
}
</style>
<div class=""style="border: 3px dashed #ccc;width:290px;padding: 10px;">
<h4 style="text-align:center;">8$ taniej!</h4>
<div class="left-cell">
Skopiuj kupon: 
</div>
<div class="right-cell">
<button data-toggle="tooltip" data-clipboard-text="CEBULAREDMI3PRO" class="kupony button" type="button" style="font-weight:bold;">CEBULAREDMI3PRO</button>
</div><br/>
<div class="left-cell">
Przedmiot: 
</div>
<div class="right-cell">
<a href="x.pl"><button class="button" type="button" style="font-weight:bold;">Xiaomi Redmi 3 Pro</button></a>
</div>
</div>

看起来：press here 我的问题是如何将按钮向右浮动以获得好看的盒子？

Answer 1

将左侧单元格设置为width:100%，将按钮设置为white-space:nowrap

＆＃13;

.left-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.right-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.button {
  white-space: nowrap;
}

＆＃13;

<div class="" style="border: 3px dashed #ccc;width:290px;padding: 10px;">
  <h4 style="text-align:center;">8$ taniej!</h4>
  <div class="left-cell">
    Skopiuj kupon:
  </div>
  <div class="right-cell">
    <button data-toggle="tooltip" data-clipboard-text="CEBULAREDMI3PRO" class="kupony button" type="button" style="font-weight:bold;">CEBULAREDMI3PRO</button>
  </div>
  <br/>
  <div class="left-cell">
    Przedmiot:
  </div>
  <div class="right-cell">
    <a href="x.pl">
      <button class="button" type="button" style="font-weight:bold;">Xiaomi Redmi 3 Pro</button>
    </a>
  </div>
</div>

＆＃13;

Answer 2

你只需要给你的父div display:table，然后浮动你的内部div，分别是float:left;和float:right;。

这是一个有效的片段：

.container {
  display: table;
}
.left-cell {
  display: table-cell;
  vertical-align: middle;
  float:left;
}
.right-cell {
  display: table-cell;
  vertical-align: middle;
  float: right;
}

<div class="container" style="border: 3px dashed #ccc;width:290px;padding: 10px;">
  <h4 style="text-align:center;">8$ taniej!</h4>
  <div class="left-cell">
    Skopiuj kupon:
  </div>
  <div class="right-cell">
    <button data-toggle="tooltip" data-clipboard-text="CEBULAREDMI3PRO" class="kupony button" type="button" style="font-weight:bold;">CEBULAREDMI3PRO</button>
  </div>
  <br/>
  <div class="left-cell">
    Przedmiot:
  </div>
  <div class="right-cell">
    <a href="x.pl">
      <button class="button" type="button" style="font-weight:bold;">Xiaomi Redmi 3 Pro</button>
    </a>
  </div>
</div>

Answer 3

demo尝试使用此css：

    .left-cell {
       display:table-cell;
       vertical-align:middle;
       float:left;
       width:40%;
    }
    .right-cell {
       display:table-cell;
       vertical-align:middle;
       text-align: right;
       width:60%;
    }

如何在<div>中垂直对齐并向右浮动？

3 个答案: