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%;}

页面仍在列表下方显示图像。我为每个框添加了width属性，因为我认为它们太大了以至于不能彼此相邻-不走运。我最初确实尝试了flexbox，但没有命名/定义flextext或fleximage，但是注意到列表项跨越了页面的整个宽度。我发现必须为其定义宽度才能为图像留出空间。

我不确定自己做错了什么或需要添加的内容。据我了解，由于父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>

需要将图像放在列表旁边

1 个答案: