代码之家 › 专栏 › 技术社区 › soccerway

当前html标记没有进行两列布局

css

soccerway · 技术社区 · 3 年前

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

<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>

//所需输出:

2 回复 | 直到 3 年前

Jaswinder Kaur 3 年前

.blogItems{
    width: 100%;
}

.blogArea{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 25px !important;
    margin: 20px 20px 10px 20px !important;
    /* border: solid 1px; */
    border-color: #E2E8F0;
    border-radius: 0px 15px 15px 0px !important;
}

.blogImageSection{
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
}

img {
    display:block;
    height: 220px;
    border-radius: 15px 0px 0px 15px;
}

.dataArea{
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff !important;
    border-radius: 0px 15px 15px 0px !important;
} 

.dataArea p {
  width: 280px;
  color: rgb(92, 90, 90);
  text-decoration: none;
  text-align: left;
  margin-left: 8px;
  font-weight:lighter;
  font-size: 14px;
}

.readmoreLink{
font-size: 12px !important;
}
.dataDate.tags.readmoreLink.views p:nth-child(1) {
  width: 50%;
  float: left;
  padding-right: 20px;
}
.dataDate.tags.readmoreLink.views p:nth-child(1) img {
    width: 100% !important;
    max-width: 100%;
}
.dataDate.tags.readmoreLink.views h3{padding-top:40px;}

 <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>
                <h3>Vue coding skills</h3>
                <p>Adding more details. about this skill is important.</p>
              </div>
            </div>
          </a>
        </div>
    </div>
 </div>

Anil kumar 3 年前

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>

方法2:
Column方法

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