html - 需要将图像放在列表旁边

Question

我正在为教授重做在线教科书，我需要在列出的点旁边放一张图片来描述图片中的内容。代码目前看起来像这样:

HTML:

<div class="flex.container">
  <div id="flextext">
    <ul>
      <li> Hairpins (eg. <em>Borellia</em>) - Normally linear chromosomes
        contain inverted repeats at each end, which are capable of forming
        hairpin loop by intra-strand base pairing. When the leading strand
        from an internal replication origin arrives at the hairpin, the
        hairpin allows the template strand to be replicated in much the same
        way as a circular plasmid, such that the leading strand is
        redirected to "follow behind" the lagging strand. Thus, there is
        always a polymerase complex upstream from each lagging strand.</li>
      <br>
      <li> Invertrons (eg. Streptomyces) - Linear chromosomes contain
        inverted repeat units at both ends. Inverted repeats are bound by
        terminal proteins (TP) which bind to the 5' end of the repeats. The
        terminal proteins themselves act as primers, binding DNA polymerase.
        The first nucleotide to be added to the template is covalently bound
        to the TP, and the chain is elongated by further addition of
        nucleotides to the 3' end of that nucleotide. </li>
    </ul>
  </div>
  <div id="fleximage"> <img src="LinearProk.png"> </div>
</div>

和CSS:

.flex-container {display:flex; flex-direction: row; align-items:center;}
#flextext {width:50%;}
#fleximage {width:50%;}

该页面仍然有列表下方的图像。我已经为每个盒子添加了宽度属性，因为我认为它们可能太大而不能彼此相邻 - 运气不好。我最初确实在没有命名/定义 flextext 或 fleximage 的情况下尝试使用 flexbox，但我注意到列表项跨越了页面的整个宽度。我发现我必须为其定义宽度才能为图像留出空间。

我不确定我做错了什么，或者我需要添加什么。据我了解，由于父 div 中的每个元素都是其自己的 div，因此它们应该像快乐的鸭子一样排成一排。

在此先感谢您的帮助!

Answer 1

您将错误的类名更改为 <div class="flex-container">

.flex-container {
display:flex; 
 flex-direction: row; 
align-items:center;
   
}
      #flextext {width:50%;}
      #fleximage {width:50%;}

<div class="flex-container">
      <div id="flextext">
        <ul>
          <li> Hairpins (eg. <em>Borellia</em>) - Normally linear chromosomes
            contain inverted repeats at each end, which are capable of forming
            hairpin loop by intra-strand base pairing. When the leading strand
            from an internal replication origin arrives at the hairpin, the
            hairpin allows the template strand to be replicated in much the same
            way as a circular plasmid, such that the leading strand is
            redirected to "follow behind" the lagging strand. Thus, there is
            always a polymerase complex upstream from each lagging strand.</li>
          <br>
          <li> Invertrons (eg. Streptomyces) - Linear chromosomes contain
            inverted repeat units at both ends. Inverted repeats are bound by
            terminal proteins (TP) which bind to the 5' end of the repeats. The
            terminal proteins themselves act as primers, binding DNA polymerase.
            The first nucleotide to be added to the template is covalently bound
            to the TP, and the chain is elongated by further addition of
            nucleotides to the 3' end of that nucleotide. </li>
        </ul>
      </div>
      <div id="fleximage"> <img src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=300"> </div>
    </div>