How to get DIVs with image in column like advertorial?

user_847047 0
Viewed 23

I've started work on a new template which uses flex to display the rows. This is only the relevant sections, within DIV content:

https://jsfiddle.net/5zyhortk/

What I am intending to do is display the photo next to the text like this (image from PDF): Image from magazine

The code that's problematic is:

<article class="col-lg-3">
<div class="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Gray_-_replace_this_image_female.svg/140px-Gray_-_replace_this_image_female.svg.png">
</div>
<p><b>Jenny</b> Jenny is an experienced copyright attorney with 15 years in the business</p>
</article>

I'm not quite sure how to get the tags working properly to display it like in the image above.

As a template it's functionally fine, but not quite working how I want it to esthetically.

Is columns or column-span the right css, or wrong for this?

css html
1 Answers

display flex propery by default is set flex-direction:row and it means whatever inside the div ( which is set to display:flex ) will be shown in a row, in other words div's or other html elements under this div will be shown side by side. To show them as table rows by one under the other you need to set flex-direction:column.

justify-content:center -> centers elements ( if flex-direction is row ) align-items:center -> vertically align items ( if flex-direction is row )

if flex direction changes, you need to change values for justify-content, and align-items.

When flex direction is set column, now justify-content centers vertically and align items centers horizontally.

An example to what you need

HTML

  <div class="content">
  <img src="" alt="">
  <div class="content_right">
    <span>Some Text</span>
    <span>Some Text</span>
    <span>Some Text</span>
    <span>Some Text</span>
    <span>Some Text</span>
  </div>
</div>

CSS

.content{
 display: flex;
 width: 350px;
 height: 180px;
 border: 1px solid #ddd;
}
 
.content img{
 height: 180px;
 width: 180px;
}

.content_right{
  display: flex;
  width: 170px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.content_right span{
 padding: 5px 0;
 width: 100%;
 text-align: center;
}
user_172368670
Related