具有非均匀背景的块内的渐变边框

Question

Захар Уляшов

Asked:2022-08-16 23:31:17 +0000 UTC2022-08-16 23:31:17 +0000 UTC 2022-08-16 23:31:17 +0000 UTC

其中一个方块坏了

772

当我改变第三张卡片的最大宽度时，它变得比其他卡片小，尽管图像和内容是相同的。

.third-card, .second-card, .first-card {
  max-width: 350px;
  background-color: rgba(37, 38, 39, 0.9);
  margin: 0 0 0 50px;
  display: inline-block;
}

.third-card .image, .second-card .image, .first-card .image {
  width: 100%;
  min-height: 200px;
}

.first-card .image {
  background: url("../source/image.jpg") 0 0/100% 100% no-repeat;
}

.second-card .image {
  background: url("../source/sharm-6.jpg") 0 0/100% 100% no-repeat;
}

.third-card .image {
  background: url("../source/image.jpg") 0 0/100% 100% no-repeat;
}

.content {
  width: 100%;
  margin: 50px 70px;
  color: #fff;
  border: black solid 1px;
  vertical-align: middle;
}
.content .text {
  padding: 30px 25px;
}
.content .text * {
  display: inline-block;
  margin-bottom: 20px;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="content">
        <div class="first-card">
            <div class="image"></div>
            <div class="text">
                <h1>Первый текст рыба</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, repellat. Accusamus alias, est deleniti facere neque dolor, cupiditate vero qui ad quod ut. Pariatur voluptas libero animi esse, laborum error.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="second-card">
            <div class="image"></div>
            <div class="text">
                <h1>Второй текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="third-card">
            <div class="image"></div>
            <div class="text">
                <h1>Третий текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>
    </div>
</body>
</html>

1 个回答

Voted

Arcadiy · Answer 1 · 2022-08-17T00:13:38Z

转换为 flex 并添加 100% 高度

.third-card, .second-card, .first-card {
  max-width: 311px;
    background-color: rgba(37, 38, 39, 0.9);
    margin: 0 0 10px 50px;
    display: flex;
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.third-card .image, .second-card .image, .first-card .image {
  width: 100%;
  min-height: 200px;
}

.first-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.second-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.third-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.content {
width: 100%;
    margin: 50px 50px;
    color: #fff;
    border: black solid 1px;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.content .text {
  padding: 30px 25px;
}
.content .text * {
  display: inline-block;
  margin-bottom: 20px;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="content">
        <div class="first-card">
            <div class="image"></div>
            <div class="text">
                <h1>Первый текст рыба</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, repellat. Accusamus alias, est deleniti facere neque dolor, cupiditate vero qui ad quod ut. Pariatur voluptas libero animi esse, laborum error.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="second-card">
            <div class="image"></div>
            <div class="text">
                <h1>Второй текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="third-card">
            <div class="image"></div>
            <div class="text">
                <h1>Третий текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>
    </div>
</body>
</html>

其中一个方块坏了

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

其中一个方块坏了

1 个回答

相关问题