内联CSS图像和段落内联

Question

I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.

Due to the web host I am having to use inline css to style the site. (trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)

Normally I would use bootstrap to achieve this but as noted that is not an option.

 <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;"> <h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;"> This is a title </h1> <div id="image" style="margin-left: 10px;"> <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> </div> <div id="texts" style="float:right;"> <p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;"> Here is my content, I am writting 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. </div> </p> </div> 

What I'm getting:

What I want:

Answer 1

All you need to do is apply float: left to image

 <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;"> <h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;"> This is a title </h1> <div id="texts"> <p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;"> <img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting 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. Here is my content, I am writting 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. Here is my content, I am writting 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> 

Answer 2

You can remove float: right from the #texts div and add float: left to the #image div:

 <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;"> <h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold"> This is a title </h1> <div id="image" style="margin-left:10px; float:left"> <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> </div> <div id="texts"> <p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%"> Here is my content, I am writting 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> 

Answer 3

1. Apply a maximum width to sibling element:

Apply a maximum width to the sibling element ( #texts ) of #image , eg:

<div id="texts" style="float:right; max-width: 80%;">

Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.

As it is now, it contains enough text/content to occupy the whole horizontal width.

2. Declare the display type of first nested element or float left

Declare the first nested element ( #image ) as either an inline-block , eg:

<div id="image" style="margin-left: 10px;display: inline-block;">

Or float it left , eg:

<div id="image" style="margin-left: 10px;float: left;">

Note: this float may need to be cleared on the containing parent element.

As it is now, this element ( div ) is a block element by default, block elements will occupy the full available width of a containing element.

Code Snippet Demonstration:

 <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;"> <h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;"> This is a title </h1> <div id="image" style="margin-left: 10px; display: inline-block;"> <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> </div> <div id="texts" style="float:right; max-width: 80%;"> <p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;"> Here is my content, I am writting 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> 

Answer 4

Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:

 <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;"> <h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1> <div style="display: flex;"> <div id="image" style="margin-left: 10px;"> <img src="http://placehold.it/100x200" width="100" height="200" alt="Image"> </div> <div id="texts"> <p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;"> Here is my content, I am writting 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> 

With this you need to add another div around the image and text content and set it to display: flex;

Answer 5

 <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: 50px solid #ffd800;"> <h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;"> This is a title </h1> <div id="image" style="margin-left: 10px; margin-right: 15px; float:left;"> <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> </div> <div id="texts" style=""> <p> Here is my content, I am writting 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.Here is my content, I am writting 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.Here is my content, I am writting 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. Here is my content, I am writting 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. </div> </p> </div> 

Answer 6

<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;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
          This is a title
  </h1>

  <div id="image" style="margin-left: 10px;float:left;">
          <img src="http://placehold.it/100x200" width="100" height="200" alt="Image"> 
      </div>

      <div id="texts" style="float:right;width:90%;"> 
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px;  font-size: 120%;">

          Here is my content, I am  writting 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. 
    </div>
  </p>
</div>