在两个不相等的列中显示博客供稿 - 可以使用Pure CSS吗？还是需要JS？

Question

我正在尝试为主页博客添加4个帖子。模拟中的布局是这样的：

饲料以带有li元素的简单ul形式出现。

我玩弄小提琴

ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;
}
li:first-child{
     width:60%;
    margin-left:0px;
    float:none;
}
li img{
     width:100%;   
}

<ul class="articles">
<li>

    <img src="https://placehold.it/465x300" />
                    <div class="articleinfofeat">Published on 10/24/14 </div>                    
                    <h2>The stock market of today is different, this is our in-depth look into the inner workings of the market</h2>
                    <p>Cu aliquando neglegentur usu, in sed ridens deserunt. Cum ut graeco torquatos, te sea sonet invenire. Ea vim cetero suavitate, veri solum mandamus sit no. Sed quas propriae ut, pri mucius dignissim suscipiantur te, ad vis ubique putant. Mei timeam lucilius adipiscing id.</p>
                    <div class="keepreadingfeat">
                     <a href="#">Keep Reading</a>
                    </div>
     
</li>    


<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 1</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>
          
</li>
<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 2</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>
        
</li>
<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 3</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>

</li>


</ul>

所以我相信我可以找到一种方法在JS中做到这一点，但我觉得这应该可以用CSS做。我一直绞尽脑汁

CSS3列只允许我做相等宽度的列。在某些元素上显示内联 - 浮动最后3个孩子将它们堆叠起来......

任何人都可以想到任何事情。如果不是，我会尝试js解决方案。

Answer 1

以下是满足您特定需求的代码 jsFiddle

---

以下代码是一个基本示例，使其可以为其他人提供更多可重用性。

＆＃13;

＆＃13;

ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul {
    width: 50%;
    height: 300px;
    padding: 20px;
    background-color: red;
}

li {
    background-color: blue;
    width: 30%;
    height: 50px;
    margin-bottom: 20px;
   float: right;  
    clear: right;
}

li:first-child {
    float: left;
    width: 60%;
    height: 50px;
    margin: 0;
    background-color: yellow;
}

＆＃13;

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看起来你很近，你只需要让第一个孩子离开。您可能希望稍微使用边距来查看您是否合适。

Here is the updated css:

   ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;

}
li:first-child{
     width:60%;
    margin-left:0px;
    float:left;/*added code*/
}
li:last-child{/*added code*/
    width:25%;
    margin-left:2.5%;
    margin-right:12.5%;
    float:right;
}



li img{
     width:100%;   
}

Answer 3

这似乎删除了float：none并将float：left添加到li选择器

ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;
    float:left;
}
li:first-child{
     width:60%;
    margin-left:0px;
}
li img{
     width:100%;   
}

Answer 4

Float：left，min-height：1000px（或5000px或zillion pixies），列宽separte exmp：列宽：465px on :: first-cild

喜欢这个吗？

＆＃13;

＆＃13;

li:first-child {
    -moz-column-width: 465px;
    -webkit-column-width: 465px;
    column-width: 465px;
    width: 465px;
    min-height: 1000px;
    float: left;
    border: 4px solid pink;
    margin-right: 20px;
}
li {
    -moz-column-width: 165px;
    -webkit-column-width: 165px;
    column-width: 165px;
    display:inline-block;
}

＆＃13;

<ul class="articles">
    <li>
        <img src="https://placehold.it/465x300" />
        <div class="articleinfofeat">Published on 10/24/14</div>
         <h2>The stock market of today is different, this is our in-depth look into the inner workings of the market</h2>

        <p>Cu aliquando neglegentur usu, in sed ridens deserunt. Cum ut graeco torquatos, te sea sonet invenire. Ea vim cetero suavitate, veri solum mandamus sit no. Sed quas propriae ut, pri mucius dignissim suscipiantur te, ad vis ubique putant. Mei timeam lucilius adipiscing id.</p>
        <div class="keepreadingfeat"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 1</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 2</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 3</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;