对齐图像和文本内联

Question

I am trying to simply put an image inline with some text so that the text and image appear beside each other. I'm using display:inline; but it dosen't seem to be working. Here is my code:

 <div class="design-image" style="display:inline;"> <img src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs" style="display:inline;"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 1

Alternatively use a flexbox:

 img { width: 300px; height: auto; } p { margin:0; } .fb { display: flex; } .programs, .design-image { padding: 1em; } 

 <div class='fb'> <div class="design-image"> <img src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> </div> 

Answer 2

To get the desired effect, you should use the float property. These change the way that elements are added to the browser window. Here is an example of what they can do for you:

 div { display: inline; } #pic { float: left; /* setting these so you know where the image would be */ width: 200px; height: 200px; background-color: red; margin-right: 50px; } #blah { float: left; width: 100px; } 

 <div id="pic"> Image would go here </div> <div id="blah"> <p>This is a short description referencing the image in question.</p> </div> 

Answer 3

Hi first of all take a div before img tag and give him width and do float right. see the code

<div>
            <p> aking the approach of truly designing programs from ground up, Northman Underwrites each individual
                to reflect the unique exposure of an extraordinary life.
            <div style="width:300px;float:right; padding:10px;"><img src="insert your image path"></div></p>
        </div>

Answer 4

Try This:

 .design-image { float: left; width: 50%; /*/ Or other Value /*/ } img { width: 100%; } 

  <div class="design-image""> <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"> </div> <div class="programs"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 5

What you want to do can be done using float and giving width to div and setting style for the image and paragraph tags. Code below can help you achieve what you want

 <div class="design-image" style="width: 50%; float: left;"> <img style="width: 100%;" src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs" style="width: 50%; float: left;"> <p style="padding: 0 20px; margin:0;">Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 6

You can align those elements with different CSS attributes, I just show you some examples.

To achieve your objective you can use float, or display inline-block or table-cell (not used by anyone, but good to know), you can use too flexbox, but it is in another answer so I didn't added it here.

Remember that "divs" are block elements, so in most cases it's wise to use inline-block than just inline. Inline-block will give you the advantage of inline property, but will keep the capacity to use vertical margin/padding (top, bottom).

jsFiddle here

<div class="method method-float">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method float <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>


<div class="method method-inline-block">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method inline-block <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>


<div class="method method-table-cell">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method display table cell (not used, but interesting to know technique) <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>

CSS

img {
  width: 100%;
  height: auto;
}

.method-float {
  overflow: hidden;
}

.method-float .design-image {
  float: left;
  width: 50%;
}

.method-float .programs {
  float: left;
  width: 50%;
}

.method-inline-block {
  font-size: 0;
}

.method-inline-block .design-image {
  display: inline-block;
  width: 50%;
  vertical-align: top;

}

.method-inline-block .programs {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: 16px;
}


.method-table-cell .design-image {
  display: table-cell;
  width: 1%;
  vertical-align: top;
}
.method-table-cell .programs {
  display: table-cell;
  width: 1%; 
  vertical-align: top;
}