Есть ли способ, которым я могу содержать изображение и контент в отдельном контейнере, используя HTML / inline CSS / Markdown - PullRequest
Новая
       28

Есть ли способ, которым я могу содержать изображение и контент в отдельном контейнере, используя HTML / inline CSS / Markdown

0 голосов
/ 30 марта 2020

Однако, если вы хотите, чтобы изображение находилось на левой стороне контейнера, если содержимое слишком короткое или слишком длинное, мне придется пропорционально отрегулировать высоту изображения, чтобы содержимое не скользило ниже изображения. Причина, по которой я хочу разместить изображение и содержимое в контейнере, заключается в том, чтобы обеспечить согласованность изображения на всех страницах.

Мы можем использовать HTML / in-line CSS / Markdown, чтобы выполнить эту настройку. Возможно, я считаю, что нам может потребоваться использовать Flexbox

. Я прикрепил приведенный ниже код, использовал Grid и таблицу, и мне это не очень нравится 

<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
  align=“left”
  hspace=“30"
  width=“100”
  height=“100">
</div>
<div>
  <h3>TITLE</h3>
  Description for Title
  <table>
    <tr>
      <td><strong>BLAH:</strong></td>
      <td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
    </tr>
    <tr>
      <td style=“vertical-align:top”><strong>Contact Us:</strong></td>
      <td style=“padding-left:20px”>
        <ul style=“padding-left: 15px; margin: 0px”>
          <li style=“padding-bottom: 10px”><a href=“mailto:sample@email.com”>Email: Jane Doe</a></li>
          <li><a>Skype: Sample</a></li>
        </ul>
        </br>
      </td>
    </tr>
  </table>
</div>
</div>

- -Самое недавнее изображение находится на левой стороне, но таблица, кажется, перекрывает изображение

Это то, как оно в настоящее время выглядит

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Вот пример flexbox:

HTML

<div style="display: flex; flex-flow: row nowrap;">
  <div style="flex: 1 auto;">
    <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
  </div>
  <div style="flex: 1 auto;">
    <h3>TITLE</h3>
    Description for Title
    <table>
      <tr>
        <td><strong>BLAH:</strong></td>
        <td style=“padding-left:20px”>
          <p>Updates are made annually or more frequently if needed
            <p />
        </td>
      </tr>
      <tr>
        <td style=“vertical-align:top”><strong>Contact Us:</strong></td>
        <td style=“padding-left:20px”>
          <ul style=“padding-left: 15px; margin: 0px”>
            <li style=“padding-bottom: 10px”><a href=“mailto:sample@email.com”>Email: Jane Doe</a></li>
            <li><a>Skype: Sample</a></li>
          </ul>
        </td>
      </tr>
    </table>

  </div>
</div>

DEMO HERE

0 голосов
/ 30 марта 2020

edit 2

Я снова отредактировал это для вас, если это должны быть встроенные стили, я дал имя класса для различных контейнеров, чтобы вы могли ясно видеть, как это работает,

ваше изображение может просто go в image-container, а ваше содержимое может go в content-container. Вы можете добавить размер к контейнерам, padding, margin и c .., чтобы настроить нужный макет, но это должно помочь с базовой настройкой c для вашей HTML. 

<div class="main-container" style="display: flex;">
      <div class="image-container">
        <img
        src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
        hspace="30" width="100" height="100">
      </div>
      <div class="content-container">
        <h3>TITLE</h3>
        <h4>Description for Title</h4>
        <table>
          <tr>
            <td><strong>BLAH:</strong></td>
            <td style="padding-left: 20px;">
              <p>Updates are made annually or more frequently if needed</p>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top;"><strong>Contact Us:</strong></td>
            <td style="padding-left: 20px;">
              <ul style="padding-left: 15px; margin: 0;">
                <li style="padding-bottom: 10px;">
                  <a href="“mailto:sample@email.com”">Email: Jane Doe</a>
                </li>
                <li><a>Skype: Sample</a></li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
    </div>
...