Блог

Главная - Вопросы по программированию - Выравнивание текста и изображений

Выравнивание текста и изображений

#html #css

Вопрос:

 <!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="canonical" href="https://http://www.reliantindustrialsupply.com/">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work Sans:300,600">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <style amp-custom>

:root {
--background: rgba(299, 299, 299, .95);
}

*, *::before, *::after {
box-sizing: border-box;
}


/* navigation styles start here */

header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}


.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}

.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}

.nav-toggle-label span::before {
bottom: 7px;
}

.nav-toggle-label span::after {
top: 7px;
}

nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
margin-bottom: 1em;
margin-left: 1em;
}

nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}

nav a:hover {
color: #000;
}

.nav-toggle:checked ~ nav {
transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}

amp-carousel {
  padding-top: 20em;
}

@media screen and (min-width: 800px) {
.nav-toggle-label {
  display: none;
}

header {
  display: grid;
  grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}

.logo {
  grid-column: 2 / 3;
}

nav {


  position: relative;
  text-align: left;
  transition: none;
  transform: scale(1,1);
  background: none;
  top: initial;
  left: initial;

  grid-column: 3 / 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav ul {
  display: flex;
}

nav li {
  margin-left: 3em;
  margin-bottom: 0;
}

nav a {
  opacity: 1;
  position: relative;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background: black;
  position: absolute;
  top: -.75em;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transition: transform ease-in-out 250ms;
}

nav a:hover::before {
  transform: scale(1,1);
}
}

amp-carousel {
  padding-top: 60em;
}

.content {
  background-color: dark-grey;
}
.Centered{
  text-align: center;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
}

.left {
  padding-right: 50%;
  margin: 2rem;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
}

.clearfix {
  overflow: auto;
}

.right {
  float: right;
}

img {
  margin-left: 50%
}




    </style>

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

  </head>
  <header>
    <h1>logo</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul>
        <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html">Contact</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>

  <body>


<amp-carousel layout="fixed-height"
  type="slides"
  height="500"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <amp-img src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
  width="100%"
  height="100%"></amp-img>
  <amp-img src="https://i.imgur.com/xxlkv2g.jpg"
  width="100%"
  height="100%"></amp-img>
  <amp-img src="https://i.imgur.com/mKQncTG.jpg"
  width="100%"
  height="100%"></amp-img>
  <amp-img src="https://i.imgur.com/F4jWDpd.jpg"
  width="100%"
  height="100%"></amp-img>
  <amp-img src="https://i.imgur.com/wWyxGeL.jpg"
  width="100%"
  height="100%"></amp-img>
  <amp-video
  layout="fixed"
  autoplay
  loop
  width="100%"
  height="100%"
  poster="https://i.imgur.com/lNFDJb1.png">
  <source src="https://i.imgur.com/3TFahoU.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support this video element.</p>
  </div>
  </amp-video>
  </amp-carousel>

  <div class='content'>
    <h1 class="Centered">Providing solutions for all your surface treatments</h1>

    <div class="clearfix">
      <p class="left">Reliant Industrial Supply provides solutions for all your surface treatments.Our supplier sia Coated Abrasives, the oldest abrasive manufacturer in the world, brings one of the best abrasives on the market. We supply Flex Trim brushes for all liner and carousel sanding needs. We provide AirVantage Sanders and Coilhose Pneumatics, for when you want the best quality handsanding tools and results. When it comes to machines, we have one of the best and also one of the most experienced machinery manufacturers, Timesavers Wide Belt Sanders. For cutting and shaping we have a wide variety of Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or sanding, you can rely on Reliant. We provide solutions for surface preparation through complete sanding systems which include coated abrasives, pneumatic sanders and machinery.</p>

      <img class="right"src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
        layout="responsive"
        width = 800px;
        height = 200px;>
    </div>
  </div>
  </body>
</html>

Я перепробовал множество решений, перечисленных в разделе переполнение стека, таких как display:inline, но они не работают. Я использовал такие вещи, как адаптивный макет. Кроме того, я пытаюсь сделать усилитель совместимым, так что это также может быть проблемой. Я точно не знаю, может ли синтаксис AMP повлиять на расположение изображений и текста. Спасибо, что помогли мне!

Комментарии:

1. Добро пожаловать в SO, спасибо, что опубликовали свой код. Последние важные вещи: в чем проблема, с которой вы сталкиваетесь, и что вы пытаетесь сделать?

2. Проблема, с которой я сталкиваюсь, заключается в том, что текст и изображение внизу не встроены, и я не знаю, как их выровнять. Спасибо, что ответили!

Ответ №1:

Вы можете обернуть p и img в divs и назначить контейнер с отображением flex класса .clearfix. Это выравнивает нижний абзац и текст рядом друг с другом.

Вам просто нужно будет поиграть с поведением дивов для быстрого реагирования.

 <!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link
      rel="canonical"
      href="https://http://www.reliantindustrialsupply.com/"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Work Sans:300,600"
    />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script type="application/ld json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": ["logo.jpg"]
      }
    </script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >

    <style amp-custom>
      :root {
        --background: rgba(299, 299, 299, 0.95);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      /* navigation styles start here */

      header {
        background: var(--background);
        text-align: center;
        position: fixed;
        z-index: 999;
        width: 100%;
      }

      .nav-toggle {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        outline: 3px solid rgba(lightblue, 0.75);
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: black;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }

      amp-carousel {
        padding-top: 20em;
      }

      @media screen and (min-width: 800px) {
        .nav-toggle-label {
          display: none;
        }

        header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2 / 3;
        }

        nav {
          position: relative;
          text-align: left;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;

          grid-column: 3 / 4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }

      amp-carousel {
        padding-top: 60em;
      }

      .content {
        background-color: dark-grey;
      }
      .Centered {
        text-align: center;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
      }

      .left {
        margin: 2rem;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
      }

      .clearfix {
        overflow: auto;
        display: flex;
      }
    </style>

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
  </head>
  <header>
    <h1>logo</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
    <nav>
      <ul>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
            >Home</a
          >
        </li>
        <li><a href="#">Products</a></li>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
            >Contact</a
          >
        </li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>

  <body>
    <amp-carousel
      layout="fixed-height"
      type="slides"
      height="500"
      controls
      loop
      autoplay
      delay="3000"
      data-next-button-aria-label="Go to next slide"
      data-previous-button-aria-label="Go to previous slide"
    >
      <amp-img
        src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
        width="100%"
        height="100%"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/xxlkv2g.jpg"
        width="100%"
        height="100%"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/mKQncTG.jpg"
        width="100%"
        height="100%"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/F4jWDpd.jpg"
        width="100%"
        height="100%"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/wWyxGeL.jpg"
        width="100%"
        height="100%"
      ></amp-img>
      <amp-video
        layout="fixed"
        autoplay
        loop
        width="100%"
        height="100%"
        poster="https://i.imgur.com/lNFDJb1.png"
      >
        <source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
        <div fallback>
          <p>This browser does not support this video element.</p>
        </div>
      </amp-video>
    </amp-carousel>

    <div class="content">
      <h1 class="Centered">
        Providing solutions for all your surface treatments
      </h1>

      <div class="clearfix">
        <div>
          <p class="left">
            Reliant Industrial Supply provides solutions for all your surface
            treatments.Our supplier sia Coated Abrasives, the oldest abrasive
            manufacturer in the world, brings one of the best abrasives on the
            market. We supply Flex Trim brushes for all liner and carousel
            sanding needs. We provide AirVantage Sanders and Coilhose
            Pneumatics, for when you want the best quality handsanding tools and
            results. When it comes to machines, we have one of the best and also
            one of the most experienced machinery manufacturers, Timesavers Wide
            Belt Sanders. For cutting and shaping we have a wide variety of
            Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
            sanding, you can rely on Reliant. We provide solutions for surface
            preparation through complete sanding systems which include coated
            abrasives, pneumatic sanders and machinery.
          </p>
        </div>

        <div>
          <img
            class="right"
            src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
            layout="responsive"
            width="800px;"
            height="200px;"
          />
        </div>
      </div>
    </div>
  </body>
</html>
Метки: