Мои столбцы CSS не идут рядом друг с другом

У меня на сайте две колонки css: правая - 25%, а левая - 75%. Однако прямо сейчас он не показывает правый столбец, левый столбец занимает 100%, и если я пытаюсь поместить что-то в левый столбец, он помещает его внизу страницы. Я поменял одну несвязанную вещь, даже не помню, что, и теперь все это не работает. Что мне нужно исправить?

мой базовый html:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src = "https://www.googletagmanager.com/gtag/js?id=UA-175481126-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-175481126-1');
</script>

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
 li a:hover {
   background-color: #111;
   color: white;
   text-decoration:none;
 }

/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}

.register {
  float: right;
}

.paging {
  background-color: #333;
  border: none;
  color: white;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
  background-color: #111;
}

/* title */

.title {
  color: black;
  padding: 10px;
  text-align: center;
  font-size: 40px;
  font-family: Tahoma, Geneva, sans-serif;
  Color: black;
  text-decoration: none;
}

/* descriptions */

.description {
  color: black;
  padding: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: left;
  font-size: 13px;
}

/* embedd url */
.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
    margin-left: auto;   /* Automatic margin from left */ 
    margin-right: auto; /* Automatic margin from right */
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* make columns */

.ads {
  float: right;
  width: 25%;
  padding-right: 3%;
  padding-left: 3%;
  background-color: #E4E9ED;
}

}
.videos {
  float: left;
  width: 75%;
  padding-right: 10%;
  padding-left: 10%;
}

.banner {
  float: left;
  width: 100%;
  height: 5%;
  background-color: red;
  color: white;
  text-align: center;
}

/* header */
.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
  font-family: Tahoma, Geneva, sans-serif;
}
</style>

<html>

{% load static %}
<link rel = "shortcut icon" type = "image/png" href = "{% static 'images/favicon.ico' %}"/>

<div class = "header">
  <a href = "/">
  <img src = "https://i.ibb.co/5Rqps7F/logo-black.png" alt = "Computer Man">
</a>
</div>

<ul>
  <li class = "all"><a href = "/">All videos</a></li>
  <li class = "stam"><a href = "/stam">Stam videos</a></li>
  <li class = "music"><a href = "/music">Music videos</a></li>
  <li class = "news"><a href = "/news">News videos</a></li>
  <li class = "contact"><a href = "/contact">Contact</a></li>
  <li class = "register"><a href = "/register">Login/Register</a></li>
</ul>

<div class = "banner">
    <text align = "center">We are still developing our site, so we may not be able to update videos as often as we want</text>
</div>

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>

моя страница html:

{% include 'base.html' %}
<style>
    .{{ category }} {
        background-color: grey;
    }
</style>

<div class = "row">
    <div class = "videos">
    {% autoescape off %}
            <h1 class = "title"> {{ video_.title }} </h1>
            {% ifnotequal video_.tag 'none' %}
                <small align = left> {{ video_.tag }} </small>
            {% endifnotequal %}
            <div class = "iframe-container"><p align = "center"> {{ video_.url }}</p></div>
            <div class = "description"> {{ video_.description }} </div>
            <hr/>

{% endautoescape %}
</div>
</div>

<div class = "row">
    <div class = "ads">
        {% for ad in ad_item %}
            {% ifequal ad.redirect 'False' %}
                <img src = "{{ ad.pic }}"></img>
            {% endifequal %}
            {% ifnotequal ad.redirect 'False' %}
                <a href = "{{ ad.redirect }}"><img src = "{{ ad.pic }}"></img></a>
            {% endifnotequal %}
        {% endfor %}
    </div>
</div>

Вы можете увидеть веб-сайт по адресу tachlis.herokuapp.com, и вы увидите, что все представляет собой один столбец, а изображение смайлика находится полностью внизу, а не в правой части страницы.

Примечание: это для веб-приложения django, поэтому может быть несколько строк, которые не имеют смысла.

Вы забыли создать родителя с display: flex;. Обратите внимание, что вам также понадобятся другие стили гибкости для того, как вы хотите, чтобы ваш макет был.

— 01.04.2021 18:28

Я добавил display: flex; в CSS, который создает правый столбец, но он все еще не работает. Я неправильно понимаю, что значит создать родителя?

— 01.04.2021 18:44

Оберните все это в div

— 01.04.2021 19:34

Большое спасибо!

— 02.04.2021 17:14

html css

01.04.2021 18:11

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто поместите свои videos и adsdiv в одну строку, например, вместо разных rows

<div class = "row">
    <div class = "videos">...</div>
    <div class = "ads">...</div>
</div>

Раньше, когда у вас было два разных rows, класс videos занимал 75% первого row, а класс ads занимал 25% второго row.

Мне также пришлось добавить display: flex; родительскому <div>. Спасибо @PiggyPlex и @ shadow-lad!

— 02.04.2021 17:15

01.04.2021 18:33

Другие вопросы по теме

Реализация функций Wavy для компонента не работает

HTML не может запустить скрипт после импорта

Как добавить фон первых дочерних элементов div для четного od

Как применить таблицу стилей к элементу с помощью Javascript

Панель поиска исчезает на маленьком экране начальной загрузки css

Как я могу заблокировать сторонние скрипты и таблицы стилей для повышения скорости загрузки страницы?

Проблема с текстом, который не отображается из-за скрытого переполнения

Как мне воссоздать этот переключатель в CSS?

React: сделать нижний колонтитул внизу

Есть ли способ разместить абзац на нескольких строках в ограниченном пространстве?

Мои столбцы CSS не идут рядом друг с другом

Ответы 1

Другие вопросы по теме

Похожие вопросы