有没有什么方法可以不使用div，而用背景色来分组css中的几个东西

q35jwt9p 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(99)

所以我的html看起来像这样：

<div class="claim approved">
 <div class="claim_left"> 
   <div class="claim_number">1235</div> 
   <div class="claim_date">2004-02-09</div> 
   <div class="claim_policy">23423342323</div> 
 </div> 
 <div class="claim_center"> 
   <div class="claim_type">Loss of goods</div> 
   <div class="claim_description">Lost my luggage</div> 
 </div> 
 <div class="claim_right"> 
   <div class="payout_amount">$600</div> 
   <div class="claim_status">approved</div> 
 </div> 
</div>

我的CSS是这样的：

.claim { display:flex; margin-bottom:8px; padding:8px; border-radius:8px; position:relative; overflow:hidden; gap: 10px; } 
.claim_left { background-color:lightgray; text-align: center; margin-top:-10px; margin-bottom:-10px; padding:8px; margin-left: -10px; width:100px; } 
.claim_center { flex-grow:1 } 
.claim_right { width:100px; color:white; padding:8px; text-align:center; margin-top:-8px; margin-bottom:-8px; margin-right:-8px; } 
.claim_type { font-weight: bold; } 
.Approved .claim_right { background-color:green; } 
.Declined .claim_right { background-color: red; } 
.Pending .claim_right { background-color:brown; } 
.claim.Approved { background-color: lightgreen; } 
.claim.Declined { background-color: pink; } 
.claim.Pending { background-color: yellow; }

即-我有一个药丸，里面有三个部分-每个部分垂直有多个项目，有点像一张table。
这是可行的，但是claim_left、claim_center和claim_right元素的存在纯粹是为了加强某种结构......我更愿意将数据与样式完全分离。没有这三个div是否有办法得到完全相同的结果？即所有结构都来自css？如果我绝对将所有内容都放在.claim中，我可以在需要的地方布置元素--但仍然不能得到正确的背景颜色--我尝试了一些方法，比如使用：before elements，但我就是不能让它工作。

css

来源：https://stackoverflow.com/questions/75726917/is-there-any-way-of-getting-the-same-effect-as-grouping-several-things-in-css-wi

1条答案

按热度按时间

vngu2lb81#

您可以删除这三个元素，而使用3列3行网格来设置格式。

.claim {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.claim {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 'number type amount' 'date description status' 'policy . status';
  margin: 0;
  padding: 0;
}

.claim>* {
  padding-left: 10px;
  padding-right: 10px;
  rdisplay: flex;
  align-items: center;
}

.claim_number,
.claim_type,
.payout_amount {
  padding-top: 10px;
}

.claim_policy {
  padding-bottom: 10px;
}

.claim_number,
.claim_date,
.claim_policy {
  background-color: lightgray;
  text-align: center;
}

.claim_number {
  grid-area: number;
}

.claim_date {
  font-weight: bold;
  grid-area: date;
}

.claim_policy {
  grid-area: policy;
}

.claim_type {
  grid-area: type;
}

.claim_description {
  grid-area: description;
}

.payout_amount {
  grid-area: amount;
}

.claim_status {
  grid-area: status;
}

.payout_amount,
.claim_status {
  color: white;
  text-align: center;
}

.approved .payout_amount,
.approved .claim_status {
  background-color: green;
}

.declined .payout_amount,
.declined .claim_status {
  background-color: red;
}

.pending .payout_amount,
.pending .claim_status {
  background-color: brown;
}

.claim.approved {
  background-color: lightgreen;
}

.claim.declined {
  background-color: pink;
}

.claim.pending {
  background-color: yellow;
}

<div class="claim approved">
  <div class="claim_number">1235</div>
  <div class="claim_date">2004-02-09</div>
  <div class="claim_policy">23423342323</div>
  <div class="claim_type">Loss of goods</div>
  <div class="claim_description">Lost my luggage</div>
  <div class="payout_amount">$600</div>
  <div class="claim_status">approved</div>
</div>

注意，我把所有的类都写成小写，因为CSS是区分大小写的。

赞(0）回复(0）举报 2023-03-20

我来回答

有没有什么方法可以不使用div，而用背景色来分组css中的几个东西

1条答案

相关问题

热门标签

最新问答