html - 尝试使用 flexbox 将图像放在页面右侧，左侧文本旁边

Question

尝试使用 flexbox 在文本块的右侧放置图像。已尝试justify-self:flex-end在图像的 CSS 上使用，但它没有按预期工作。

HTML：

<div class="introduction">
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <img src="picofme.jpg">
</div>

CSS：

.introduction{
  display:flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap:wrap;
  padding:10px;
  list-style:none;
  position:absolute;
  left:200px;
  text-align: center;
}
.introduction h2{
  font-size: large;
  font-weight: normal;
  color:#707070;
  
}
.introduction h3{
  background:#646CC5;
  padding:5px;
  margin:10px;
  width:300px;
  height:5px;
 
}
.introduction img{
  width:100%;
  height:auto;
  justify-self: flex-end;
}

站点图片，图片应填充右侧的空白区域，但当前位于文本块下方。黑框是文本的占位符，这很好。

标签： htmlcssflexbox

Answer 1

这是您可以使用的代码段。基本上我只是将其删除flex-direction: column;并.introduction更改为flex-direction: row;在行中显示子元素。然后我将这个奇怪的文本元素包装到另一个 div 中。这是结果。

.introduction{
  display:flex;
  flex-direction: row;
  justify-content: center;
  padding:10px;
  list-style:none;
  position:absolute;
  left:200px;
  text-align: center;
}
.introduction h2{
  font-size: large;
  font-weight: normal;
  color:#707070;
  
}
.introduction h3{
  background:#646CC5;
  padding:5px;
  margin:10px;
  width:300px;
  height:5px;
 
}
.introduction img{
  width:100%;
  height:auto;
}

.text_div {
  display:flex;
  flex-direction: column;
}

<div class="introduction">
  <div class="text_div">
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
  </div>
    <img src="https://via.placeholder.com/150">
</div>