Menu icon Foundation
Image and Text in a row

Hello everyone!

I need to place image and text in one row and text plus image in another row.
IMAGE+TEXT
TEXT+IMAGE
IMAGE+TEXT
.......
etc.

Text should be around image.

This is my codepen : http://codepen.io/mixa_ru/pen/GpMdGq

How can I do that?

Thank you!

imagetext

Hello everyone!

I need to place image and text in one row and text plus image in another row.
IMAGE+TEXT
TEXT+IMAGE
IMAGE+TEXT
.......
etc.

Text should be around image.

This is my codepen : http://codepen.io/mixa_ru/pen/GpMdGq

How can I do that?

Thank you!

Eli Tung almost 4 years ago

Wouldn't you just create separate rows and specify the column width by the # in the classes?

Or you could just use regular CSS.

Mikhail Svirkin almost 4 years ago

Eli Tung, do you mean something like this:

<div class="row">
  <div class="large-6 columns"> TEXT</div>
  <div class="large-6 columns">IMAGE</div>
</div>

<div class="row">
  <div class="large-6 columns">IMAGE</div>
  <div class="large-6 columns">TEXT</div>
</div>

?

In this case I wiil not have text around image.
There will be 2 separate columns : one for text and other for image.

This is not a solution for my task.

Eli Tung almost 4 years ago

Do you mean a row or a line?

Mikhail Svirkin almost 4 years ago

Here is a markup:

http://codepen.io/mixa_ru/pen/GpMdGq

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
    <div class="right_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
    <div class="right_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
  </div>
</div>

I need text to be around images when one image at the left side and another image at the right side.