Question

.courseinfo{
margin:0px;
text-align:center;
}
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

    .jumbotron {
      top: 50%;
      left: 50%;
      background-image: url(image.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 2px;
    }

    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }

    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }

    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }

    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }

    .intro {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      color: white;
      font-size: 100px;
      padding: 10px;
      line-height: 1.8em;
    }

    .secondbg {
      background-image: url("circuit.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      justify-content: center;

      align-items: top;

    } 

    .barofcolour {

      top: 50%;
      left: 50%;
      background-color: lightblue;
      background-position: 0% 25%;
      padding: 1%;
      background-repeat: no-repeat;
      border: 2px;
    }

    .coursep {
      width:40%;
      text-align: left;
      background-color: antiquewhite;
      margin-left: 1%
    }

    .whatwelearn{
      text-align: left;
      width:50%;
      font-size: 40px;
      margin:1%;
    }

    .listoflearn {
      width:40%;
      font-size: 28px;
      margin:1%;
    }

    .backoftable {
      background-color: burlywood;
      width:40%;
      margin-left: 1%;
      padding-top: 0.05%;
      padding-bottom: 0.05%;
      border-left: 1%;
    }

    .learningpic{
      align-content: center;
    }

<!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>

<div class="secondbg">
  <div class = "barofcolour">
      <div class="courseinfo">
        <h2>About This Course
        </h2>
      </div>

  </div>

如何将文本放在burlywood框的右侧，并与文本处于同一水平？每当我放置“心理学”图片时，列表和我们学到的标题都会被下推！我怎样才能解决这个问题？我希望文本和图像位于同一高度，但图像位于框的右侧。这是学校的作业。任何帮助将不胜感激：）。

Answer 1

这就是我所做的：

我将.listoflearn HTML嵌套在您的.whatwelearn类中，所以他们会聚在一起。
我在.backoftable类的三个元素中添加了浮点数。的图片float:left;；文本float:right;。
我还从border-left:1%;类中删除了.backoftable。
然后，我对宽度百分比进行了一些调整。不知道这是否会影响您的分配，但是...鉴于字体大小，我觉得这是必需的。

.courseinfo{
    margin:0px;
    text-align:center;
}

body, html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      color: white;
      font-size: 100px;
      padding: 10px;
      line-height: 1.8em;
    }

.secondbg {
      background-image: url("circuit.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      justify-content: center;
      align-items: top;
    }

.barofcolour {
      top: 50%;
      left: 50%;
      background-color: lightblue;
      background-position: 0% 25%;
      padding: 1%;
      background-repeat: no-repeat;
      border: 2px;
    }

.coursep {
      width:40%;
      text-align: left;
      background-color: antiquewhite;
      margin-left: 1%
    }

.backoftable {
    background-color: burlywood;
    width:50%;
    height:45%;
    margin-left: 1%;
    padding-top: 0.05%;
    padding-bottom: 0.05%;
}

.learningpic{
    float:left;
    align-content: center;
    }

.whatwelearn{
    float:right;
    text-align: left;
    width:60%;
    font-size: 40px;
    margin:1%;
    }

.listoflearn {
    float:right;
    width:auto;
    font-size: 28px;
    margin:1%;
    }

 <div class="secondbg">
  <div class = "barofcolour">
      <div class="courseinfo">
        <h2>About This Course</h2>
      </div>
  </div>

   <div class="coursep">
    <p>This course examines computer systems and control of external devices. Students will develop
      knowledge and skills in electronics, interfacing, programming, and networks, will build systems that
      use computer programs and interfaces to control and respond to external devices. Students will
      develop an awareness of related environmental and societal issues, and will learn about college and
      university programs leading to careers in computer technology.</p>
  </div>


 <div class = "backoftable">
      <div class = "learningpic">
        <img src="https://i0.wp.com/oupeltglobalblog.com/wp-content/uploads/2018/03/Psychology.jpg?resize=400%2C400&ssl=1" alt="Learning" width="303" height="303">
      </div>
    <div class = "whatwelearn">
      <h2>What We Learn:</h2>
    <div class = "listoflearn">
        <ul>
            <li>Web Development</li>
            <li>Basic Electronics</li>
            <li>Programming</li>
            <li>Digital Electronics</li>
            <li>Interfacing</li>
            <li>Technology Environment Careers Safety Society</li>
      </ul>
    </div>
    </div>
  </div>
</div>

Note: The image came from the Oxford University Press website.

p.s。请以“完整尺寸”查看此图片，以正确查看它。

如何修复图片下推文字？

1 个答案: