Question

我目前正在尝试做一些看起来很愚蠢的事情，但这对我来说是一个真正的挑战。我必须在一个宽度为20vw的导航栏中列出10篇文章，每个文章都必须看起来像this

我尝试了很多东西，但我不知道是否有“正确的方法”来做到这一点

<nav class="sidebar">
    <ul>
        <li>
            <div class="articlepic">
                <img src="https://i.neilrichter.com/g8qp8.png" alt="">
            </div>
            <div class="article_description">
                <h6>Le récap' des bons plans du moment, semaine 43</h6>
                <p>Il y a 7 heures</p>
            </div>
        </li>
    </ul>
</nav>

这是我的css：

.sidebar {
    position: absolute;
    right: 0;
    top: 20%;
    width: 20vw;
    height: auto;
}

.side_articles {
    display: flex;
    margin: 10px;
}

.sidebar img{
    width: 60%;
    position: relative;
}

看起来像this

一样难看

您是否有关于如何操作的建议/提示/示例？

Answer 1

尝试使用此笔，然后相应地更改代码。 https://codepen.io/aalokindreams/pen/ZXQGVB

.side_articles {
    display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex: 4 1 60%;
flex: 4 1 60%;
padding: 0px;
background: #fff;
border: none;}

Answer 2

从Bootstrap Media块样式启发（并采用）： https://getbootstrap.com/docs/4.0/layout/media-object/

根据需要调整填充，颜色和其他样式。

.article {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.article img {
    border-style: none;
    display: block;
    margin-right: 1rem!important;
    max-width: 100px;
    vertical-align: middle;
    width: 100%;
}

.article-body {
    -ms-flex: 1;
    flex: 1;
}

.article-heading {
    font-size: 14px;
    font-weight: 700;
}

<nav class="sidebar">
    <div class="side_articles">
        <div class="article">
            <img src="https://i.neilrichter.com/g8qp8.png" alt="">
            <div class="article-body">
                <h3 class="article-heading">Le récap' des bons plans du moment, semaine 43</h3>
                <p>Il y a 7 heures</p>
            </div>
        </div>
    </div>
</nav>

Answer 3

你从第一个例子得到了什么？检查他们的代码并尝试剖析它。也就是说，您需要Font Awesome来获取图标。您可能还需要包含Google Fonts中的字体。另外，仅设置图像的宽度不会以如此紧密的间距切割它，您应该强制执行严格的像素完美尺寸（使用media queries来定位不同的屏幕尺寸） - 通常这样的侧边栏是一个严格的布局，所以让你的图像伸展他们想要的不是一个选择。也就是说，只要你找到一个更具体的问题，自己做实验并回来。 Stack Overflow并非真正适合这种一般性指导。

如何在导航栏中制作文章列表

3 个答案: