我们如何根据所提供的屏幕截图将以下html更改为两列布局.我无法修改/添加标记到html,因为它当前呈现如下 根据jsfiddle,我已经try 了如下:

https://jsfiddle.net/68f2svby/5/

<div className='blogItems'>
      <div className='row'>
        <div className='blogArea'>
          <a href="somelink">
            <div class="popularArea">
              <div class="dataDate tags readmoreLink views">
                <p>
                <img src="https://picsum.photos/100" alt="hello">
                </p>
                <p> 22 Feb 2023</>
                <h2>Vue coding skills</h2>
                <p>Adding more details. about this skill is important.</p>
                <p>Adding more details. about this skill is important.</p>
                <p>Adding more details. about this skill is important.</p>
                <p> Read more ....</>
              </div>
            </div>
          </a>
        </div>
    </div>
 </div>

//期望输出:

enter image description here

推荐答案

float:left解决您的问题

.popularArea img {
            float: left;

        }
<div className='blogItems'>
        <div className='row'>
            <div className='blogArea'>
                <a href="somelink">
                    <div class="popularArea">
                        <div class="dataDate tags readmoreLink views">
                            <p>
                                <img src="https://picsum.photos/100" alt="hello">
                            </p>
                            <p> 22 Feb 2023</>
                            <h2>Vue coding skills</h2>
                            <p>Adding more details. about this skill is important.</p>
                            <p>Adding more details. about this skill is important.</p>
                            <p>Adding more details. about this skill is important.</p>
                            <p> Read more ....</>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

method 2:
Column method

.dataDate.tags.readmoreLink.views {
            columns: 2 auto;
        }
.popularArea img {
            height: 200px;
        }

    
        

Css相关问答推荐

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

使用普通 CSS 的视口对角线长度

禁用MUI DataGrid上的悬停效果

如何在Bootstrap 5上使用移动设备居中内容?

Bootstrap 5 - 更改列顺序时出现问题

不同的背景 colored颜色 取决于 URL

react 样式的条件类名称设置

在revealjs/Quarto中定义一类反背景的幻灯片

Angular (13) material - 覆盖 CSS 文件不起作用

在 css 中使用 first-of-type 效果太好了吗?

在移动设备上touch 屏幕边缘的元素(Material UI)

reactjs - 容器中水平行的png图像

在 css 中使用 FontAwesome 或 Glyphicons :before

位置元素垂直固定,绝对水平

CSS:在图像周围创建白光

Angular 动画的目的是什么?

在 react-native 中使用 flex 使项目粘在底部

如何重置或覆盖 IE CSS 过滤器?