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

标签 html css

我希望这两个容器是分开的，并且 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/

上一篇：css - .css 文件中的 “$menuHeight” 是什么意思？

下一篇：javascript - 变量没有变化。错误在哪里？

相关文章：

html - 我通过在内部有一个勾号的外部 div 制作了一个自定义复选框..现在没有应用事件类

javascript - 是否可以在 html 文本字段中显示图像？

css - 如何选择其中包含数字的 css id？

html - 索引、第一个和最后一个元链接和 rel 属性

基于 PHP 的联系表单在 Blogger 中不起作用

javascript - Firefox Android 中 "input"和 "white-space:pre-wrap"的高度大于 Android 中的 Chrome

jquery - 使用 jQuery 更改每个页面上的 CSS 属性

javascript - 在所有适度使用的浏览器中检测缩放级别？

html - 即条件html语句

html - 防止 HTML 输入溢出时移动

©2024 IT工具网  联系我们