HTML 容器未完全获取其内容且两个容器未成 block-6ren

HTML 容器未完全获取其内容且两个容器未成 block

转载作者：行者123 更新时间：2023-11-28 00:52:24

我希望这两个容器是分开的，并且 background-color 占据容器的全部内容。

目前它们似乎并没有占据全部内容并且相互重叠。

我尝试应用 display: block 使它们分开，但这不起作用，关于 background-color，我似乎做不到确定问题。

.commonItem {
  border-image-source: linear-gradient(25deg, #7e848a 15%, #cfcfcf);
  background-image: radial-gradient(#d0d0d0 0%, #6d7071 100%);
}

.handmadeItem {
  border-image-source: linear-gradient(25deg, #008a09 15%, #9eef00);
  background-image: radial-gradient(#5bad03 0%, #01700a 100%);
}

.sturdyItem {
  border-image-source: linear-gradient(25deg, #0063c5 15%, #00efec);
  background-image: radial-gradient(#3dc7ff 0%, #0059a1 100%);
}

.qualityItem {
  background-image: radial-gradient(#d27bf4 0%, #7907a5 100%);
  border-image-source: linear-gradient(25deg, #8037d7 15%, #df2cef);
}

.fineItem {
  border-image-source: linear-gradient(25deg, #df7241 15%, #f6c87c);
  background-image: radial-gradient(#fb9625 0%, #875134 100%);
}

.itemImage {
  width: 100%;
}

.itemContainer {
  height: 106px;
  width: 106px;
  position: relative;
  padding: 0;
  border-image-slice: 20;
  border-width: 4px;
  border-style: solid;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.itemDetails {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1rem;
  width: 100%;
}

.itemName {
  background: rgba(0, 7, 36, 0.5);
  padding: 2px 0;
  text-align: center;
  color: white;
  font-size: 0.9em;
}

.itemPrice {
  font-weight: bold;
  background-color: #000724;
  width: 100%;
  padding: 1px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  color: white;
}

.itemPrice img {
  width: 1.5em;
  padding-right: 0.3rem;
  display: block;
}

.itemShopDaily {
  background-color: red;
  display: block;
}

.itemShopWeekly {
  background-color: green;
  display: block;
}

<div class="itemShopDaily">
  <div class="containerTitle">Daily Items</div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
</div>

<div class="itemShopWeekly">
  <div class="containerTitle" style="margin-top: 5px;">Weekly Items</div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
</div>

工作 JS fiddle :http://jsfiddle.net/gk3utjhr/
在网站上工作:http://fortniteprosnipes.x10.bz/

最佳答案

您的 float 容器需要一个 clearfix。

.commonItem {
  border-image-source: linear-gradient(25deg, #7e848a 15%, #cfcfcf);
  background-image: radial-gradient(#d0d0d0 0%, #6d7071 100%);
}

.handmadeItem {
  border-image-source: linear-gradient(25deg, #008a09 15%, #9eef00);
  background-image: radial-gradient(#5bad03 0%, #01700a 100%);
}

.sturdyItem {
  border-image-source: linear-gradient(25deg, #0063c5 15%, #00efec);
  background-image: radial-gradient(#3dc7ff 0%, #0059a1 100%);
}

.qualityItem {
  background-image: radial-gradient(#d27bf4 0%, #7907a5 100%);
  border-image-source: linear-gradient(25deg, #8037d7 15%, #df2cef);
}

.fineItem {
  border-image-source: linear-gradient(25deg, #df7241 15%, #f6c87c);
  background-image: radial-gradient(#fb9625 0%, #875134 100%);
}

.itemImage {
  width: 100%;
}

.itemContainer {
  height: 106px;
  width: 106px;
  position: relative;
  padding: 0;
  border-image-slice: 20;
  border-width: 4px;
  border-style: solid;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.itemDetails {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1rem;
  width: 100%;
}

.itemName {
  background: rgba(0, 7, 36, 0.5);
  padding: 2px 0;
  text-align: center;
  color: white;
  font-size: 0.9em;
}

.itemPrice {
  font-weight: bold;
  background-color: #000724;
  width: 100%;
  padding: 1px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  color: white;
}

.itemPrice img {
  width: 1.5em;
  padding-right: 0.3rem;
  display: block;
}

.itemShopDaily {
  background-color: red;
  display: block;
}

.itemShopWeekly {
  background-color: green;
  display: block;
}

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

<div class="itemShopDaily clearfix">
  <div class="containerTitle">Daily Items</div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer fineItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
</div>

<div class="itemShopWeekly clearfix">
  <div class="containerTitle" style="margin-top: 5px;">Weekly Items</div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
  <div class="itemContainer qualityItem">
    <img src="URL" class="itemImage">
    <div class="itemDetails">
      <div class="itemName">Sample</div>
      <div class="itemPrice">
        <img src="https://cdn.thetrackernetwork.com/cdn/trackernetwork/3C7Avbucks.png" />
        <span>2,000</span>
      </div>
    </div>
  </div>
</div>

您应该考虑修改此布局的方法以改用 Flexbox。

.container {
  padding: 10px;
}

.container.daily {
  background: red;
}

.container.weekly {
  background: green;
}

.container-title {
  margin: 0;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  height: 106px;
  width: 106px;
  flex: 0 0 auto;
  display: flex;
}

.item-inner {
  width: 100%;
  margin: 5px;
}

.daily .item-inner {
  background: #7907a5;
}

.weekly .item-inner {
  background: #fb9625;
}

<div class="container daily">
  <h5 class="container-title">Daily Items</h5>
  <div class="items">
    <div class="item">
      <div class="item-inner"></div>
    </div>
    <div class="item">
      <div class="item-inner"></div>
    </div>
    <div class="item">
      <div class="item-inner"></div>
    </div>
  </div>
</div>

<div class="container weekly">
  <h5 class="container-title">Weekly Items</h5>
  <div class="items">
    <div class="item">
      <div class="item-inner"></div>
    </div>
    <div class="item">
      <div class="item-inner"></div>
    </div>
    <div class="item">
      <div class="item-inner"></div>
    </div>
  </div>

关于HTML 容器未完全获取其内容且两个容器未成 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53143243/

文章推荐： c++ - C++中的双重继承运行时错误

文章推荐： c++ - 牛顿法返回 NaN

文章推荐： c++ - 在 Polynom 类中重载 += 运算符以添加 Polynom 和常量

文章推荐： c++ - 静态私有(private)成员(member)柜台

java - 并行流看起来不像是并行工作，完全
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
java - 完全 OR 的正则表达式包含
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。例如，所有这些样本应返回 Glentworth+Ireland: Glentw
javascript - 如何(完全)复制文件但更改文件名？
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。目前我正在这样做: uploadFile.map((file) => { if (fi
haskell - 为什么您不能(完全)应用具有使用其他类型同义词的参数的类型同义词？
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
delphi - 需要计算哪些像素是(完全)透明的
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
.net - Powershell 卸载模块...完全
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
elasticsearch - ElasticSearch中的半完全(完全)匹配
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
ASP.NET - 信任级别 = 完全？
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
ajax - 完全 Ajax 应用程序的基于内容的广告
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
c# - 如何判断文件是否已*完全*写入
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
javascript - Disqus 评论框不显示(完全)
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
python - 完全 Cython 化的应用程序
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
c# - 隐藏控制台应用程序的控制台(完全)，但只是有时
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。我找到了
algorithm - 完全 K 叉树
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。我注意到第一层有一
java - 完全 volatile 可见性保证
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
algorithm - NP 完全 - 在非确定性多项式时间内可解
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
algorithm - 子集推理 NP 完全？
考虑以下问题: 有N个硬币，编号为1到N。你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
c++ - 如何使用户定义的类型像内置类型一样*完全*地初始化？
我想制作一个包装数字类型的类型(并提供额外的功能)。此外，我需要数字和包装器可以隐式转换彼此。到目前为止我有: template struct Wrapper { T value;

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 容器未完全获取其内容且两个容器未成 block