如何在两个接缝之间动态地放置一个“浮动动作按钮”？

Question

我想知道如何在两个“接缝”之间动态地放置一个“浮动操作按钮”--这取决于它所在的元素。谷歌称之为(Reference: Floating Action Button, Google Material Design)。

在我的例子中，我使用简单的HTML容器类和少量的CSS规则来创建Google Cards。

​

​

我在这里使用的HTML和CSS代码如下所示：

​

/* Google Material Design (Paper-) Cards */
*.card {
	position: relative;

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;

	color: var(--grey800);
	background-color: var(--grey50);
}
*.card .card-header {
	position:relative;

	padding: 20px 16px;

	border-radius: 2px 2px 0px 0px;
	-moz-border-radius: 2px 2px 0px 0px;
	-webkit-border-radius: 2px 2px 0px 0px;
}
*.card .card-header > span.card-title {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5em;
}
*.card .card-header > span.card-subtitle {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5em;
	color: var(--grey700);
}
*.card .rich-media {
  position: relative;
}
*.card .rich-media > img {
  display: block;

  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  width: 100%;

  border: 0;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
*.card .card-header ~ .rich-media > img {
	border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	-webkit-border-radius: 0px 0px 2px 2px;
}

*.card .rich-media > span.card-title {
  position: absolute;
  left: 0;
  bottom: 0;

  padding: 20px 16px;

  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: var(--white);
}
*.card .card-content {
  padding: 20px 16px;
}
*.card .card-content + .card-content {
  border-top: 1px solid rgba(160, 160, 160, 0.2);
}

*.card .card-action {
	position: relative;

	padding: 20px 16px;

	border-top: 1px solid rgba(160, 160, 160, 0.2);

	border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	-webkit-border-radius: 0px 0px 2px 2px;

	background-color: inherit;
}
*.card .card-action > a {
	transition: color .3s ease;

	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5em;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--orange500);
}
*.card .card-action > a:hover {
	color: var(--orange200);
}

/* Google Material Design Buttons */
*.btn {
	/* ... */
}
*.floating-action {
	width: 56px;
	height: 56px;
	
	text-align: center;
	
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
*.floating-action .material-icons {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

<div class="card" data-elevation="1">
  <!-- card header -->
  <div class="card-header">
    <span class="card-title">Card Title</span>
    <span class="card-subtitle">Card Subtitle</span>
  </div>
  <!-- card image  -->
  <div class="rich-media">
    <image src="mountains.jpg"></image>
  </div>
  <!-- card content -->
  <div class="card-content align-left">
    <!-- floating action button -->
    <div class="floating-action bg-orange500" data-elevation="2">
      <i class="material-icons txt-white">mail_outline</i>
    </div>
    <p class="flowtext">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
    </p>
  </div>
  <!-- card actions -->
  <div class="card-action">
    <a href="#">This is a link</a>
  </div>
</div>

​

我正在尝试的是一种方法，将看到的按钮(上面有信封图标的小按钮)放在(前一个)两个连续的边框之间，如下面的红点所示：

​

​

还可以添加多个内容容器；在这种情况下，放置的按钮也应该放在先前连续的容器边界之间。

​

​

在上面显示的最后一种情况下，按钮将被放置在第二个卡片容器元素中。

也许一些jQuery计算会有所帮助。你认为如何？实现所需布局的最佳实践是什么？

Answer 1

在Page：http://materializecss.com/cards.html中，您可以访问卡片示例，其中一个示例是在卡片的标题和内容之间放置FAB按钮。您所要做的就是查看它们在源代码中显示的CSS。

  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">Card Title</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red">
             <i class="material-icons">add</i>
          </a>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>
    </div>
  </div>


.btn-floating.btn-large i {
    line-height: 56px;
}

.btn-large i {
    font-size: 1.6rem;
}
.btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    line-height: 40px;
}
.btn-floating.btn-large.halfway-fab {
    bottom: -28px;
}

.btn-floating.halfway-fab {
    position: absolute;
    right: 24px;
    bottom: -20px;
}
.btn-floating.btn-large {
    width: 56px;
    height: 56px;
    padding: 0;
}