将标题和段落环绕图像

Question

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.

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.

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.

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.

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.

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.

EDIT

Here is a mockup of what I am trying to do.

Answer 1

You want to float your image left within the container:

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

The margins may need to be adjusted.