0
Follow
5
View

How to create layout that same with layout in this picture in CSS

dercat 注册会员
2023-01-26 07:52

If you are using bootstrap5, this already work with display flex. So, no need for any extra CSS. Just try this one-

Some
Content
Here

B Brand

C Brand

D Brand

Here is some little css-

#section {
        background-color: #fe0;
        min-height: 100vh;
    }
    #section .box img {
        max-width: 100%;
    }
    #section .container>.row {
        border: 4px solid #000;
    }
    #section .container>.row .box {
        border-left: 4px solid #000;
    }
    #section .bg-active {
        background-color: #FF3800;
    }
jiaoliuyang321 注册会员
2023-01-26 07:52

I might try using a flexbox instead of a table.

.item{
       flex: 1 0 0;
    }
.flex-container{
    display: flex;
}
    
   
B BRAND
C BRAND
D BRAND
c BRAND

The text bubbles in front can be positioned using

position:absolute
                   
cw90000711 注册会员
2023-01-26 07:52

.issue_row>th {
  height: 40px;
  background-color: #111111;
  color: white;
  text-align: center;
}

.issue_table {
  background-color: #111111;
}

.item {
  width: 150px;
  height: 180px;
}

.issue_item_image {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.issue_item.not_image {
  width: 150px;
  height: 180px;
  background-color: #FF3800;
}

B BRAND C BRAND D BRAND E BRAND

Here's how you do it. You can also check this JS fiddle

About the Author

Question Info

Publish Time
2023-01-26 07:52
Update Time
2023-01-26 07:52

Related Question

为什么Integral()函数声称存在奇点,而实际上显然没有?

flink on yarn角色不起来

proteus出现http://xinzhi.wenda.so.com/a/1548951549204192

JS Function.prototype.apply()解释

如何获得最大计数和最小计数从对象列表使用Linq

springboot依赖注入mysql报错

processing python小游戏

kali渗透win10,python文件意思?

binascii.Error: Incorrect padding Django问题

偶尔从.net, Hello World, Minimal API得到内部服务器错误