时间戳

首页 > 解决方案 > 如何将图像放在网页上的 div 元素旁边？

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

问题描述

我很难弄清楚如何将我的图像放在我的段落旁边。目标是在我的文本旁边设置一个图像，不是超级接近，而是在同一行。我怎样才能在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;
}

标签： htmlcssreactjs

解决方案

我不建议使用 CSS 浮动，您可以使用 flex 框，但这种工作方式会向 DOM 添加更多 div，只是为了根据需要设置位置。

我建议使用 CSS 网格，需要更少的 DOM 节点，更少混乱的 CSS。您可以在此处阅读所有相关信息。你在这里或这里有更详细的补偿。

基本上你会想要为容器设置一个网格并设置标题、左右部分。

像这样的东西

.about-page {
  display: grid;
  grid-template-areas:
    'header header'
    'description image';
  grid-gap: 10px;
}

.clock-image { grid-area: image; }
.header { grid-area: header; }
.about { grid-area: description; }

推荐阅读