问题描述:

I´d like to know how I can place a "floating action button" as Google calls it (Reference: Floating Action Button, Google Material Design) dynamically between two "seams" - depending on the element it is placed in.

In my case I use simple HTML container classes with few CSS rules to create Google Cards.

The HTML and CSS Code I used here looks like the following:

/* 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>

相关阅读:
Top