包裹标题和图像周围的段落

Question

这听起来非常简单，但是由于某些原因我很难弄清楚，而且令我惊讶的是我的搜索没有找到确切的答案，尽管我确实看到了我想要的东西一个旧的教程（结果是一个屏幕截图-.-＆＃34;）但它实际上并没有给我想要的结果。我想要做的是在图像周围用一个带有它的兄弟段落的标题标记，虽然我的结果看起来像一个两列布局，其中文本在一侧，图像在另一侧，和两行布局，文本最终位于图像下方，而不是我想要的实际换行。

我的HTML已经有各种各样的

    <div class="container">
       <div class="image">
         <img />
       </div>
       <div class="text">
         <h3> Heading </h3>
         <p> Lorem ipsum.... </p>
       </div>
    </div>

我尝试在文本周围移除容器，从图像中移除容器，同时移除两个容器，没有产生所需的结果。

我的css几乎是我在最初的风格无法工作后可以从网上找到的东西拼凑起来的。

我向左移动.container（以及我移除容器时的图像），已从标题中剥离clear:等。

当我将标题放在初始容器之外并只包装paragraph时，这确实有效，但我的目标是将图像的顶部与h3的顶部对齐跟随它。

如果这是重复的话我不会感到惊讶，所以我提前道歉，如果是的话，因为我的头脑告诉我，在过去的十年中每天必须完成5000次。令我惊讶的是，我从来没有这样做过，也无法找到我需要的具体资源。在此先感谢您的帮助。

修改

这是我想要做的一个模型。

Answer 1

您希望将image留在容器中：

＆＃13;

＆＃13;

.image {
  float: left;
  margin-top: 4px;
  margin-right: 4px;
}
h3 {
  color: red;
  font-size: 200%;
}
.text {
  font-family: Arial, Helvetica, sans-serif;
}
p {
  font-size: 80%;
}

＆＃13;

<div class="container">
  <div class="image">
    <img src="https://www.gravatar.com/avatar/960a96a88892064995fd5b11ec160dfa?s=32&d=identicon&r=PG&f=1" height="150px" width="150px" />
  </div>
  <div class="text">
    <h3> Title Text </h3>
    <p>How to create a Minimal, Complete, and Verifiable example When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… …Minimal – Use
      as little code as possible that still produces the same problem …Complete – Provide all parts needed to reproduce the problem …Verifiable - Test the code you're about to provide to make sure it reproduces the problem Minimal The more code there
      is to go through, the less likely people can find your problem. Streamline your example in one of two ways: Restart from scratch. Create a new program, adding in only what is needed to see the problem. This can be faster for vast systems where you
      think you already know the source of the problem. Also useful if you can't post the original code publicly for legal or ethical reasons. Divide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear,
      start removing code a bit at a time until the problem disappears – then add the last part back. Minimal and readable Minimal does not mean terse - don't sacrifice communication to brevity. Use consistent naming and indentation, and include comments
      if needed to explain portions of the code. Most code editors have a shortcut for formatting code - find it, and use it! Also, don't use tabs - they may look good in your editor, but they'll just make a mess on Stack Overflow. Complete Make sure
      all information necessary to reproduce the problem is included: Some people might be prepared to load the parts up, and actually try them to test the answer they're about to post. The problem might not be in the part you suspect it is, but another
      part entirely. If the problem requires some server-side code as well as an XML-based configuration file, include them both. If a web page problem requires HTML, some JavaScript and a stylesheet, include all three. Verifiable To help you solve your
      problem, others will need to verify that it exists: Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code
      is producing it. Put a brief summary of the problem in the title of your question. Eliminate any issues that aren't relevant to the problem. If your question isn’t about a compiler error, ensure that there are no compile-time errors. Use a program
      such as JSLint to validate interpreted languages. Validate any HTML or XML. Ensure that the example actually reproduces the problem! If you inadvertently fixed the problem while composing the example but didn't test it again, you'd want to know
      that before asking someone else to help. It might help to shut the system down and restart it, or transport the example to a fresh machine to confirm it really does provide an example of the problem. For more information on how to debug your program
      so you can create a minimal example, Eric Lippert has a fantastic blog post on the subject: How to debug small programs.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

可能需要调整保证金。