问我怎样才能修复图片按下文字？
EN

Stack Overflow用户

提问于 2019-03-13 01:10:21

回答 1查看 65关注 0票数 0

.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>

我怎样才能把文本放在宝莱坞盒子的右边，和文本处于同一水平呢？每当我把心理学的形象，名单和我们学到的标题被推倒！我怎么才能解决这个问题？我希望文本和图像在相同的高度，但是图像在框的右边。这是学校的作业。如有任何帮助，将不胜感激:)。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-13 03:41:16

我所做的是：

我将您的.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>

注:图片来源于牛津大学出版社网站。

附注：请查看这个“全尺寸”，以正确地看到它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55132916

复制

相似问题

问我怎样才能修复图片按下文字？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能修复图片按下文字？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能修复图片按下文字？
EN