文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将<article>向右对齐，使下面的<article>保持在is下方，并且我可以将图像放在此<article>的左侧？

问如何将<article>向右对齐，使下面的<article>保持在is下方，并且我可以将图像放在此<article>的左侧？
EN

Stack Overflow用户

提问于 2019-05-25 23:56:35

回答 1查看 23关注 0票数 0

抱歉，如果这有点乏味，这是我第一次在堆栈溢出。我正在为学校做HTML作业，在那里我们需要建立我们自己的网站。如何将一篇文章放在页面的右侧，使其旁边没有文章？提前感谢！

这是针对HTML5和CSS3的，在VS代码中构建站点。我曾尝试将其设置为float: right;，但它使下面的文章在其旁边弹出。

我拥有的东西：

<article>Some text Some text some text</article>
<article>More text More text More text</article>

如上所述，我试着让它浮动，但并没有像我希望的那样工作。唯一能产生我想要的东西的东西，就是文章上的一吨padding-left。

我基本上尝试的是让它看起来像这样：

                                    Some text Some text some text along with some text

More text More text More text along with more text

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-26 00:11:51

这里有一个例子！

.container {
  width: 300px;
}

.left, .right {
  display: flex;
}

.left {
  justify-content: flex-start;
}

.right {
  justify-content: flex-end;
}

<body>
  <div class="container">
    <article class="right">Some text Some text some text</article>
    <article class="left">More text More text More text</article>
  </div>
</body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56306449

复制

相似问题

问如何将<article>向右对齐，使下面的<article>保持在is下方，并且我可以将图像放在此<article>的左侧？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将<article>向右对齐，使下面的<article>保持在is下方，并且我可以将图像放在此<article>的左侧？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将<article>向右对齐，使下面的<article>保持在is下方，并且我可以将图像放在此<article>的左侧？
EN