html - 如何将图像放在网页上的 div 元素旁边？

Question

我很难弄清楚如何将我的图片放在我的段落旁边。目标是在我的文本旁边设置一个图像，不是非常接近而是在同一行上。我怎样才能在 css 中做到这一点？下面是我的 About.js 和 About.css。我的段落包含在一个名为 about-page 的 div 中。我尝试将我的 img 标签放在那个 div 之外，但它会导致错误。它应该看起来像下面的这个草图。

import React from 'react'
import '../CSS/About.css'
import clock from '../clock.jpg'

const About = () => {
  return (
    <div className="about-page">
      <h6 className="about-this-app-header">About This Application</h6>
      <p className="description">
        Do You Have A Habit of Forgetting Stuff? Don't Worry!!!
        <br />
        Here's <b>Reminder Me</b> to The Rescue.
      </p>
      <p className="description">
        <b>Reminder Me</b> is a reminder management application
        <br />
        that lets you send reminders through text message.
        <br />
        It lets you set a time/duration and a message for your
        <br />
        reminder. And makes sure that it's sending out right on
        <br />
        time, not letting you or your friends miss out on the
        <br />
        important things in life.
      </p>
      <h6 className="tech-stack-header">Tech Stack</h6>
      <h6 className="tech-stack">Front-End: <p className="tech">React, Materialize UI, Font Awesome</p></h6>
      <h6 className="tech-stack">
        Back-End: <p className="tech">Express.js, Firebase, Node.js, Twilio API</p>
      </h6>
      <h6 className="link-to">
        Link to:
        <a
          href="https://github.com/jspades93?tab=repositories"
          target="_blank"
          rel="noopener noreferrer"
          className="waves-effect waves-light btn-flat"
        >
          <i className="fa fa-github" style={{ fontSize: "36px" }}></i>
        </a>
      </h6>
      <div className="clock-image"><img src={clock} alt="clock" /></div>
    </div>
  );
};

export default About

h6 {
    font-weight: bold;
    color: #056674;
}
.btn-flat {
    color: black;
}

.about-this-app-header {
    margin-top: 100px;
    margin-left: 170px;
}
.description {
    margin-top: 20px;
    margin-left: 90px;
}
.tech-stack-header{
    margin-top: 25px;
    margin-left: 210px;
}
.tech-stack {
    margin-left: 90px;
}
.link-to {
    margin-left: 35px;
    margin-top: 20px;
}
img {
    width: 390px;
    height: 250px;
    float: right;
}
.tech {
    display: inline;
    vertical-align: top;
    color: black;
    font-weight: normal;
}

Answer 1

你应该像这个例子一样使用浮点数:
使用 float: left;用于您的文本和使用 float: right;为您的形象。

.left {
  float:left;
}
.right {
  float:right;
}
figure img {
  margin:10px;
  width: 50%;
}
figcaption {
  font-family:sans-serif;
  font-weight:bold;
  font-size:16px;
  padding:10px;
}
.clear {
  clear:both;
}
.centered {
  margin: auto; /* margin:auto centers the figure element */
  width: 50%;
  background:#ccc;
  text-align:center; /* text-align centers the text and image only - you need margin:auto to center the entire figure */
}

<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="left">
  <figcaption> This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width of the page. This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width
    of the page. </figcaption>
</figure>
<div class="clear"></div>
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="right">
  <figcaption> This is the caption for a right-floated photo. This div in between figures with the clear:both property clears the float from the div above it, so the next div can have a different or no float. </figcaption>
</figure>
<div class="clear"></div>

  <figure class="centered"><img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT">
    <figcaption class="centered-text"> Tip: margin:auto ONLY works if the width property is set, and not set to 100%, so the margins can push the less-than-full-width element into the middle. </figcaption>
  </figure>
</div>