Question

我尝试将浮动：右侧应用于按钮和文本，但它只是不起作用，因为它会破坏所有内容。

有什么想法吗？

                        <hr>
                    <div class="table">
                        <div class="row">
                            <a href="#" class="btn-primary left-cell"><i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
                            <span class="right-cell"> 14 neue Meldungen</span>
                        </div>
                    </div>
                    <hr>

https://jsfiddle.net/uoyh2fk9/

Answer 1

不确定是什么，“销毁所有内容”意味着，但听起来flexbox可能会更好地满足您的目标。从您的div中删除display: table并尝试以下操作：

<强> CSS

.row {
  display: flex;
  justify-content: flex-end;
}

JSFiddle

如果您想了解有关flexbox及其工作原理的更多信息，请here is a link。

Answer 2

这是一个可能的解决方案：https://jsfiddle.net/UXEngineer/uoyh2fk9/9/

<div class="container-fluid">
  <div class="col-lg-12">
    <div class="col-md-3 col-sm-3 border-red">
      <a href="#" class="btn btn-primary">
        <i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
    </div>
    <div class="col-md-9 col-sm-9 border-red">
      <span>14 neue Meldungen</span>
    </div>
    <div class="col-lg-12 clearfix"></div>
    <div class="col-lg-12 clearfix">
      <hr class="horizontal-divider">
    </div>
    <div class="col-md-9 col-sm-9 border-red">
      <span>14 neue Meldungen</span>
    </div>
    <div class="col-md-3 col-sm-3 border-red">
      <a href="#" class="btn btn-primary">
        <i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
    </div>
  </div>
</div>

我已经使用Bootstrap CDN向JSFiddle中的示例添加了一个响应式解决方案。如果您想使用此jsfiddle，请确保您还将CDN外部源添加到您的解决方案中。

您可以更改列大小以适合您的解决方案。

浮动右表不起作用

2 个答案: