0

尝试使用 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;
}

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

4

2 回答 2

0

这是您可以使用的代码段。基本上我只是将其删除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>

于 2020-11-27T11:24:51.910 回答
0

<li>需要包裹在 a<ol>或<ul>tag 中，然后 flex 确实是您所需要的。

也<h3></h3>应该是包含文本的标题，而不是设计元素，<li>可以有边框。

可能的例子：

.introduction {
  display: flex;
  padding: 10px;
  width:max-content;
  margin: auto;
}

ul {
  list-style: none;
  flex-grow: 1;
  text-align: center; 
  width: 300px;
}

.introduction h2 {
  font-size: large;
  font-weight: normal;
  color: #707070;
  border-bottom: solid 1.6rem #646CC5;
}

.introduction img {
  margin: auto 1em;
}
<div class="introduction">
  <ul>
    <li>
      <h2>Text</h2>
    </li>
    <li>
      <h2>Text</h2>
    </li>
    <li>
      <h2>Text</h2>
    </li>
    <li>
      <li>
        <h2>Text</h2>
      </li>
      <li>
        <h2>Text</h2>
      </li>
  </ul>
  <img src="https://dummyimage.com/100/159">
</div>

于 2020-11-27T11:47:19.967 回答