在图像中包含标题和段落 [英] Wrap heading and paragraph around image

问题描述

听起来这将是非常简单，但我很难找出来的原因，令人惊讶的是，我的搜索没有找到一个确切的答案，虽然我没有看到我想在一个旧的教程（其中结果是一个屏幕截图 - ），但它实际上没有给我想要的结果。我想做的是包装一个标题标签，它的兄弟段落在一个图像，虽然我的结果是看起来像一个两列布局，其中文本在一侧，图像在另一侧，以及两行布局，其中文本在图像下方，而不是我打算的实际换行。

This sounds like it'd be incredibly simple but I'm struggling to figure it out for some reason and surprisingly my searches haven't found an exact answer, though I did see what I want in an old tutorial (where the results were a screen shot -.-" ) but it did not actually give me the desired results. What I am trying to do is wrap a heading tag with it's sibling paragraph around an image, though my results have been what looks like a two column layout where the text is on one side and the image on another, and a two row layout where the text ends up below the image, instead of the actual wrap I am aiming for.

我的html已经有各种

My html has been a variety of

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

我已经尝试删除文本周围的容器，从图像中删除容器，同时删除这两个容器，无

I've tried removing the container around the text, removing the container from the image, and removing both containers at the same time, none with the desired results.

我的css几乎是什么，我可以在一起，我可以找到在网上，我最初的样式不工作后。

My css has been pretty much what ever i could throw together from what I could find online after my initial styles didn't work.

我把 .container 浮动到左边（以及我移除容器时的图片）， clear：从标题等。

I am floating .container to the left (as well as the image when I've removed the container), have stripped clear: from the heading, etc.

当我把标题放在初始容器之外时，只是包装段，但我的目标是将图像的顶部与 h3 的顶部对齐

This does work when I put the heading outside of the initial container and just wrap the paragraph, but my goal is to align the top of the image to the top of the h3 with the pargraph following it.

如果这是重复的，我不会感到惊讶，所以如果是这样，我先提出道歉，因为我的心意告诉我这必须做5000次过去十年的一天。令我惊讶的是，我从来没有这样做，也不能找到一个特定的资源，我需要什么。感谢您的帮助。

I would not be surprised if this was a duplicate, so I apologize in advance if so, because my mind tells me this has to be done 5,000 times a day for the last decade. To my surprise I've never done this, nor can I find a specific resource to what I need. Thanks in advance for the help.

编辑

这里是一个模型

推荐答案

您希望将图像 ：

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

<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>

需要调整。

这篇关于在图像中包含标题和段落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！