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

Question

我正在尝试为主页博客设置 4 post 提要的样式。模型中的布局是这样的：

提要以带有 li 元素的简单 ul 形式出现。

我玩过 fiddle

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

看起来你已经很接近了，你只需要向左浮动第一个 li child。您可能想稍微调整一下边距，看看是否适合您。

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 2

这似乎是为了删除 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 3

这里是满足您特定需求的代码jsFiddle

下面的代码是一个基础示例，可以让其他人更容易重用它。

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

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

Answer 4

浮动：左，最小高度：1000px（或 5000px 或不计其数的像素），column-width separte exmp：column-width：465px on ::first-cild

像这样？

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

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

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

Displaying a blog feed, in two unequal columns - Can it be done with Pure CSS? or JS needed?

html

css

blogs