115KC
0
Follow
5
View

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

How to create a layout show image box and text box in front of the image boxes in the same with the layout in this picture:

Thank you very much.

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

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

.issue_item {
  width: 100%;
  height: 100%;
}

.issue_item .issue_item_image {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<table>
  <tbody>
    <tr>
      <th></th>
      <th>B BRAND</th>
      <th>C BRAND</th>
      <th>D BRAND</th>
      <th>E BRAND</th>
    </tr>
    <tr>
      <td>
        <div class="issue_item not_image"></div>
      </td>
      <td>
        <div class="issue_item"><img class="issue_item_image" src="https://i.ibb.co/MPQ6ww8/B-Brand.png" /></div>
      </td>
      <td>
        <div class="issue_item"><img class="issue_item_image" src="https://i.ibb.co/9HhhhV7/C-Brand.png" /></div>
      </td>
      <td>
        <div class="issue_item"><img class="issue_item_image" src="https://i.ibb.co/9vvRdQP/D-Brand.png" /></div>
      </td>
      <td>
        <div class="issue_item"><img class="issue_item_image" src="https://i.ibb.co/n6RFPLL/E-Brand.png" /></div>
      </td>
    </tr>
  </tbody>
</table>

How to create layout that same with layout in this picture in CSS
复制链接 新浪微博 腾讯空间
微信扫一扫

0 Answer

Sort by default
Sort by hot
dercat
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
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
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

druid3368 注册会员

这家伙很懒，什么都没留下...

0
Answer
0
Article
0
Question

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得到内部服务器错误

115KC © 2023 闽ICP备2020022241号