html - 如何修复图像下推文本？-6ren

html - 如何修复图像下推文本？

转载作者：行者123 更新时间：2023-11-28 00:15:37

.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 框的右侧，并与文本处于同一水平？每当我放置心理学图像时，列表和我们学习的标题都会被推下!我怎样才能解决这个问题？我希望文本和图像在同一高度，但图像在框的右侧。这个作业是给学校的。任何帮助将不胜感激:)。

最佳答案

这是我做的:

我将您的 .listoflearn HTML 嵌套在您的 .whatwelearn 类中，所以他们会聚在一起。
我在 .backoftable 类中的三个元素中添加了 float 。这图片，float:left;;文本，float:right;。
我还从 .backoftable 类中删除了 border-left:1%;。
并且，我稍微调整了宽度百分比。不确定这是否会影响您的作业，但是……考虑到字体大小，我觉得这是必要的。

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

附注请以“全尺寸”查看此内容以正确查看。

关于html - 如何修复图像下推文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55132916/

文章推荐： javascript - 为什么我的下拉 Accordion 不起作用？

文章推荐： javascript - D3 中 time.scale 的动态刻度值

文章推荐： javascript - SyntaxHighlighter 错误地插入新行和编号

Mercurial 推/拉详细输出
当我推/拉存储库时，是否可以详细输出到底发生了什么？目前，我有一个大型存储库，正在将其推送到服务器，大约 15 分钟后。或者这样，它给了我一个错误，但没有告诉我它在这 15 分钟内做了什么。最佳答案
html - 推/拉多行列
我不知道我的方法是否有意义，但是，我需要实现如下图的布局: 现在，我只写一个并用其中的一列表示每个区域，例如 . 没有黄色区域，这工作正常: green red blue
css - 推/拉类在网格系统中做什么？
当我查看许多 CSS 网格系统和框架时，它们通常具有标准的列和行设置以及百分比宽度。例如这样的事情: 标准网格列: .col-10 { width: 83.33333%; width: cal
git子模块提交/推/pull
我想使用 git 子模块。我需要采取的步骤将我的更改推送到我的项目是 add/commit/push from submodule directory add/commit/push from pa
站长平台对百度流量与关键词工具进行重大升级：推“关键词影响力”
以下为百度站长平台的公告全文：结合站长对于关键词数据分析的需求，站长平台对流量与关键词工具进行了升级，推出(“关键词影响力”）这一全新概念。关键词影响力算法复杂，涵盖该关键词下百度搜索可以为
wxwidgets - (推+下拉)按钮wxWidgets
我需要一个具有普通按钮和下拉按钮的控件。例如类似的控件在 wxRibbonButtonBar 中可用，我无法在简单的 wxPanel 中使用它。最佳答案我实现了 SplitButton，它看起
svn - 如何将集市分支导出到新的颠覆存储库，然后从中拉/推
我一直在做一个项目，使用 Bazaar 作为版本控制系统。现在我必须和离岸人员一起工作，而他们只想使用 SVN。我有什么: 我的 bazaar 分支及其文件和修订版。一个全新的 subversio
data-structures - 推/拉数据流模型的优缺点是什么？
我一直在开发数据流/图表风格的内部 DSP 应用程序(Java 带有 Groovy/Jython/JRuby 的钩子(Hook)，通过 OSGi 的插件，大量的 JNI)，类似于纯数据和 simuli
assembly - THUMB 推/弹出指令
我正在尝试使用 THUMB 指令创建一个阶乘方法，我基本上做到了。我只有一个关于 PUSH/POP 操作码的问题:如果我使用 push 将 r0 的值存储在堆栈中(所以 push {r0} )，我可
ZeroMQ/ZMQ 推/拉模式的实用性
在尝试 ZeroMQ Push/Pull (他们称之为 Pipeline)套接字类型时，我很难理解这个图案。它被称为“负载均衡器”。假设单个服务器将任务发送给多个工作人员，推/拉将在所有客户端之间平
callback - Firebase - 推()回调
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
authentication - github - 推/拉时要求用户名和密码
我有这个问题，每次推或拉时我都必须把它放进去。我认为这是新的。有什么想法吗？最佳答案您可能正在使用 https 网址。切换到 ssh 并确保您的 key 设置正确(如果您的密码短语为空)，则不必输
assembly - ASM - 推/弹出
为什么当您将一个值压入堆栈时，ESP 寄存器会减少(而不是增加)，而当您弹出一个值时，ESP 寄存器会增加(而不是减少)？在这一点上，这对我来说是违反直觉的。最佳答案那是因为堆栈是从上到下“增长”
callback - Firebase - 推()回调
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
push - ZeroMQ 推/拉模式
我决定编写一个测试代码来查看 pusher - many pullers bundle 是如何工作的，我的怀疑成真了。拉取器按照连接的顺序接收消息，例如第一个消息由第一个连接的拉取器接收，第二个由第
javascript - 将新数字“推”入对象数组
我在 CSV 文件中存储了一长串日期。我已经成功地使用 d3.js 加载了这个数据集。现在我想向此数据集添加另一列，其中包含列表中每个日期的随机数。我相信此数据集已作为对象数组加载。所以我正在使用下
C++ vector 推/弹出
我一直在寻找解决方案。不使用 c++11。 for(int a = 1; a < team1.chan; a++) { team1.nums.push_back(ppb.back())
android - 如何在布局中滑动(推) subview ？
我打算在布局中构建带有滑动 subview 的 UI。 +--------------+ +--------------+ +--------------+ | view1
html - 推/拉 - 基础
Title 在小屏幕上，我首先需要标题，然后是文本字段，但在中等以上的屏幕上，我需要相反的方式 - 我已经尝试过推和拉，但它们无法工作 - 有什么想法吗？最佳答案根据 Swa
c++ - ZeroMQ 推/拉
zmq 的某些部分未以可预测的方式运行。我正在使用 VS2013 和 zmq 3.2.4。为了不在我的 pubsub 框架中“丢失”消息 [旁白:我认为这是一个设计缺陷。我应该能够首先启动我的订阅者

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何修复图像下推文本？