时间戳

首页 > 解决方案 > 如何对齐

向右，使
下面停留在下面，我可以在这个左边放一张图片
?

html - 如何对齐
向右，使
下面停留在下面，我可以在这个左边放一张图片
?

问题描述

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

这适用于 HTML5 和 CSS3，在 VS Code 中构建网站。我试图做到这一点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

标签： htmlcss

解决方案

这是一个例子！

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

推荐阅读