Question

我正在使用CSS文件设计卡片，类似于材料设计卡片。我还设计了类似于FAB的按钮。我希望将这两个元素结合在一起，因此该卡在图像和卡内容之间的右侧具有FAB，但是我不确定如何执行此操作。

这是当前的CSS设计：

CSS代码：

@import url('https://fonts.googleapis.com/css?family=Oswald|Noto+Serif');

body {
    background: #DDD;
    padding: 20px;
    box-sizing: border-box;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    width: 500px;
    transition: 0.3s;
    margin-top: 5px;
    margin-bottom: 10px;
    background: white;
    box-sizing: border-box;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}

.card p {
    font-family: 'Noto Serif', serif;
    padding: 2px 16px;
    margin-bottom: 10px;
}

.card img {
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.card p.title {
    font-family: 'Oswald', sans-serif;
    font-size: 20pt;
    padding: 2px 16px;
}

.bordered {
    border: 1px solid black;
}

.rounded {
    border-radius: 5px;
}

.fab {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    background: #333;
    color: #fff;
    box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 
                0px 4px 12px -7px rgba(0, 0, 0, 0.15);
    font-size: 2em;
    border: none;
}

.fab:hover {
    box-shadow: 0 0 8px rgba(0,0,0,.14),
                0 8px 10px rgba(0,0,0,.28);
}

.fab:focus {
    outline: none;
}

@media only screen and (max-width: 600px) {
    /* Portrait Phone */
    .card {
        width: 100%;
    }
}

HTML页面：

<html>
    <head>
        <title>Cards Example</title>
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>

        <div class="card rounded">
            <img src="./res/beach.jpg">
            <p class="title">Rounded Card</p>
            <button class="fab">
                    <i class="fa fa-github-alt"></i>
            </button>
            <p>This card has rounded corners, if that's more your style. I definitely like the subtle rounded corners,
                however rounded cards and normal cards do not go well together.
            </p>
        </div>

        <button class="fab">
                <i class="fa fa-github-alt"></i>
        </button>
    </body>
</html>

我不知道使FAB集中在图像和内容之间的最佳方法。我猜我应该使用选择器，但是我不确定该使用哪个选择器，以及如何转换按钮使其居中。预先感谢。

Answer 1

这是您所指的吗？您希望第一个fab实例位于图像和p标签之间正确吗？我已将您的fab的第一个实例移到类别为div的新button_fab上。这样我们就可以将button保留在主div中，并且我们可以按自己的意愿操纵整个按钮。

您可以按任意方式放置按钮。我给了它一个text-align属性和一个right值。

I am working on a CSS file to design Cards, similar to Material Design Cards. I have also designed a button similar to a FAB. I wish to combine these two elements, so the card has the FAB on the right side between the image and the card content, but I am not sure how to go about doing this.

Here is the current CSS design: enter image description here

CSS Code:

@import url('https://fonts.googleapis.com/css?family=Oswald|Noto+Serif');

body {
    background: #DDD;
    padding: 20px;
    box-sizing: border-box;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    width: 500px;
    transition: 0.3s;
    margin-top: 5px;
    margin-bottom: 10px;
    background: white;
    box-sizing: border-box;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}

.card p {
    font-family: 'Noto Serif', serif;
    padding: 2px 16px;
    margin-bottom: 10px;
}

.card img {
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.card p.title {
    font-family: 'Oswald', sans-serif;
    font-size: 20pt;
    padding: 2px 16px;
}

.bordered {
    border: 1px solid black;
}

.rounded {
    border-radius: 5px;
}

.button_fab {
  text-align: right;
}

.fab {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    background: #333;
    color: #fff;
    box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 
                0px 4px 12px -7px rgba(0, 0, 0, 0.15);
    font-size: 2em;
    border: none;
}

.fab:hover {
    box-shadow: 0 0 8px rgba(0,0,0,.14),
                0 8px 10px rgba(0,0,0,.28);
}

.fab:focus {
    outline: none;
}

@media only screen and (max-width: 600px) {
    /* Portrait Phone */
    .card {
        width: 100%;
    }
}

<html>
    <head>
        <title>Cards Example</title>
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>

        <div class="card rounded">
            <img src="./res/beach.jpg">
            <div class="button_fab">
              <button class="fab">
                      <i class="fa fa-github-alt"></i>
              </button>
            </div>
            <p class="title">Rounded Card</p>
            <p>This card has rounded corners, if that's more your style. I definitely like the subtle rounded corners,
                however rounded cards and normal cards do not go well together.
            </p>
        </div>

        <button class="fab">
                <i class="fa fa-github-alt"></i>
        </button>
    </body>
</html>

在容器中的两个元素之间对齐自定义CSS按钮

1 个答案: