如何将图像保留在左侧，将我的内容保留在右侧？

Question

我正在制作一个简单的网站。我正在尝试在左侧显示图像，在右侧显示文本内容。但是，如果文本行数多于图像的高度，则文本会转移到图像的一侧。谁能帮我解决这个问题？这是我现在所拥有的screenshot以及我正在谈论的内容。下面是我正在使用的CSS和HTML。

/* Please do ignore .choices and #questions, that's for something else, not related to the question */
#questions > .question, #languages > .language{
    margin: auto;
    overflow: auto;
    padding: 8px;
    width: 75%;
}
.choices > .choice, #languages > .language{
    background: #ffffff;
    border-radius: 8px;
    opacity: 0.7;
    overflow: auto;
    padding: 16px;
}
#questions, #languages{
    margin-bottom: 48px;
}
#languages > .language{
    margin-top: 8px;
}
.language > img{
    float: left;
    margin-right: 24px;
    padding: 12px;
}

<div id="javascript" class="language">
  <img src="images/logo/js.png">
  <div class="content">
    <section class="overview">    
      <h2>Overview</h2>
      <p></p>
    </section>
    <section class="comparison">
      <h3>Pros</h3>
      <ul class="pros">
        <li>Executed on the client side, which means you don't have to worry about your server being overworked</li>  <li>Easy to pickup, syntax is similar to the English language</li><li>Webpages can be easily extended</li></ul> <h3>Cons</h3>
      <ul class="cons">
        <li>Easily exploited</li>
        <li>Rendered differently throughout different browsers</li>  
      </ul>
    </section>
  </div>
</div>

Answer 1

最简单的方法是插入此方法以使#javascript元素成为Flexbox容器：

#javascript {
  display: flex; 
  }

＆＃13;

＆＃13;

/* Please do ignore .choices and #questions, that's for something else, not related to the question */

#questions > .question,
#languages > .language {
  margin: auto;
  overflow: auto;
  padding: 8px;
  width: 75%;
}
.choices > .choice,
#languages > .language {
  background: #ffffff;
  border-radius: 8px;
  opacity: 0.7;
  overflow: auto;
  padding: 16px;
}
#questions,
#languages {
  margin-bottom: 48px;
}
#languages > .language {
  margin-top: 8px;
}
.language > img {
  float: left;
  margin-right: 24px;
  padding: 12px;
}
#javascript {
  display: flex; 
  }

＆＃13;

<div id="javascript" class="language">
  <img src="images/logo/js.png">
  <div class="content">
    <section class="overview">
      <h2>Overview</h2>
      <p></p>
    </section>
    <section class="comparison">
      <h3>Pros</h3>
      <ul class="pros">
        <li>Executed on the client side, which means you don't have to worry about your server being overworked</li>
        <li>Easy to pickup, syntax is similar to the English language</li>
        <li>Webpages can be easily extended</li>
      </ul>
      <h3>Cons</h3>
      <ul class="cons">
        <li>Easily exploited</li>
        <li>Rendered differently throughout different browsers</li>
      </ul>
    </section>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;