内联CSS实现Div中图片与段落同行布局问题求助

Got it, let's sort out this layout issue for you—since you're stuck with only inline CSS, we can fix this without any external tools or files. First, let's break down what's off in your current code:

• You’ve got a misplaced closing </p> tag (it’s outside the #texts div, which makes the HTML invalid and messes up rendering)
• The image container is acting as a full-width block element, so it pushes the text div below instead of sitting next to it

Here’s the corrected code that’ll make your image and paragraph sit side-by-side, while keeping all your existing styling intact:

<div style="display: inline-block; color: black; border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800; padding: 0 10px; box-sizing: border-box;">
  <h1 style="color: black; margin-top: -27px; padding-left: 5px; font-weight: bold;">This is a title</h1>
  <div style="display: flex; align-items: flex-start; gap: 10px;">
    <div id="image">
      <img src="https://placehold.it/100x200" width="100" height="200" alt="Image" style="display: block;">
    </div>
    <div id="texts">
      <p style="color: black; margin: 10px 0; font-size: 120%;">
        Here is my content, I am writing more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
      </p>
    </div>
  </div>
</div>

Key Changes Explained: #

• Fixed HTML Structure: Moved the closing </p> tag inside the #texts div to make the markup valid—invalid HTML often causes weird layout glitches you can’t easily trace.
• Flexbox Wrapper: Wrapped the image and text in a container with display: flex—this is the cleanest inline way to get elements side-by-side. gap:10px adds spacing between them, and align-items:flex-start ensures both elements line up at the top instead of the center.
• Box Sizing: Added box-sizing: border-box to the outer div so padding doesn’t make the container wider than you intend.
• Block Image: Set the image to display:block to remove tiny default inline spacing that can appear below images.

If you need to support super old browsers that don’t handle flexbox, here’s a float-based alternative that works just as well:

<div style="display: inline-block; color: black; border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800; padding: 0 10px; box-sizing: border-box; overflow: hidden;">
  <h1 style="color: black; margin-top: -27px; padding-left: 5px; font-weight: bold;">This is a title</h1>
  <div id="image" style="float: left; margin-right: 10px;">
    <img src="https://placehold.it/100x200" width="100" height="200" alt="Image" style="display: block;">
  </div>
  <div id="texts" style="overflow: hidden;">
    <p style="color: black; margin: 10px 0; font-size: 120%;">
      Here is my content, I am writing more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
    </p>
  </div>
</div>

Float Method Notes: #

• float:left pushes the image to the left, with margin-right adding space between it and the text.
• overflow:hidden on the text container makes it wrap around the floated image instead of flowing underneath.
• overflow:hidden on the outer div clears the float so the container doesn’t collapse unexpectedly.

Both solutions use only inline CSS, so they’ll work perfectly with your hosting restrictions!

内容的提问来源于stack exchange，提问作者Phil3992