Блог

Главная - Вопросы по программированию - Как я могу исправить изображение, выталкивающее текст вниз?

Как я могу исправить изображение, выталкивающее текст вниз?

#html #css

#HTML #css

Вопрос:

 .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 и на том же уровне, что и текст? Всякий раз, когда я размещаю изображение Psychology, список и заголовок what we learn опускаются! Как я могу это исправить? Я хочу, чтобы текст и изображение находились на одной высоте, но изображение справа от поля. Это задание для школы. Буду признателен за любую помощь :).

Комментарии:

1. @faizan-khan уммм …. вы убрали части, относящиеся к вопросу, из фрагмента кода …. (?)

2. @elbrant какие части?

3. @elbrant Доступны как HTML, так и CSS

4. @faizan-khan весь HTML, начиная с <div class="coursep"> всего пути к </html>

5. @john-bob Не могли бы вы сказать нам, насколько велико изображение (или загрузить его)? Это значительно упростило бы решение вашей проблемы. (спасибо)

Ответ №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,400amp;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>

Примечание: Изображение взято с веб-сайта издательства Оксфордского университета.

p.s. Пожалуйста, просмотрите это в «полном размере», чтобы увидеть это правильно.

Комментарии:

1. Вы были близки к этому, но я действительно хочу, чтобы мозг находился на ПРАВОЙ стороне. Кроме того, мне действительно нужно, чтобы обе цветные полосы были одинакового размера. Есть еще идеи?

2. Неважно. Я это исправил. Большое вам спасибо! Вы действительно легенда!