Question

我知道我可以使用CSS float轻松实现这种布局，这是我现在让div具有布局的当前方式。但是，我正在尝试重新编码并将其更改为弹性对齐。

这是我的标记：

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 1</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 2</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 3</h2></div>
        </a>        
    </div>
</div>

这是我的CSS：

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}

.the-post-inner a {
    margin-bottom: 4%;
}

.the-post-inner a .image {
      padding-bottom: 60%;
}

.the-post-inner a .content {
      padding: 20px;
}

.the-post-inner a .content h2 {
      margin: 0;
}

.the-post-inner a:first-child {
    flex: 0 0 60%;
    margin-right: 4%;
}

.the-post-inner a:not(:first-child) {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;

    overflow: hidden;
    float: left;
    display: block;
}

我根据其他帖子中的答案尝试了几种代码，但似乎无法实现这项工作。

提前感谢您的建议。

编辑：

我想知道是否有一种方法可以在不更改当前标记的情况下实现这一目的，即不将另一个div中的左侧文章和另一个容器中的右侧文章分开。

https://jsfiddle.net/pextb1of/

Answer 1

我刚刚解决了一些问题。也许会帮助您。

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    height: 100px;
    border: 1px solid #000;
}

a {
    /*border: 1px solid #000;*/
    margin-bottom: 4%;
    /*padding: 20px;*/
}

.the-post-inner {
    flex: 0 0 60%;
    margin-right: 4%;
}

.sec-inner {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;
    flex-direction: column;

    overflow: hidden;
    float: left;
    display: flex;
}



#the-posts{
  display: flex;
  flex-direction: row;
}

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">Post 1</a>
        
    </div>
    <div class="sec-inner">
        <a href="#">Post 2</a> 
        <a href="#">Post 3</a>
    </div>
</div>

CSS Flex左边是一个大div，右边是两个小div

1 个答案: