Почему первый div моей правой колонки ведет себя странно? (У меня одинаковые стили для всех) - PullRequest
0 голосов
/ 11 мая 2018

Самый первый элемент div, имеющий класс «container», не позиционирует себя так же, как другие элементы div внутри div «mom».
Я специально сделал все разноцветным, чтобы размеры были легко видны.
Я хочу переместить все элементы div вправо, но мне нужно, чтобы их текст был центрирован.
У моего левого контейнера div, "mom1" нет такой же проблемы.
Только правый контейнер div, "mom"плохо себя ведет.

<!DOCTYPE html>
<html>

CSS

<style>
 .image.main
 {
    background-color:yellow;
    width:99%;
    position: fixed;
    top:108px;
    z-index:-1;
    text-align: center;
 }

 .image.main img 
 {
   background-color:red;
   height:505px;
   opacity: 0.8;
   z-index:-1;
 }

 .mom
{
   background-color:gray;
   width: 330px;
   height: 500px;
   float: right;
   overflow: auto;
   text-align:center;
}
 .mom1
{
   background-color:gray;
   width: 330px;
   height: 500px;
   float: left;
   overflow: auto;
   text-align:center;
   color:white;
}
.container
{
background-color:green;
}
.container2
{
background-color:pink;
}
.container3
{
background-color:white;
}

.shapes
 {
   text-align: center;
 } 
 header, footer{
   background-color:#982202;
   color: white;
   height:38px;
 }
 footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index:-1;
 }
</style>

HTML

<code> <head>
  <title>Jared Gilmore is Lovely</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="About Jared Gilmore">
  <meta name="keywords" content="Jared Gilmore, teenage, actor, talented, modern, comedy">
  <meta name="author" content="Meghedi Mirbekian">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
<header>
<h1>Jared Gilmore</h1>
</header>

<div class="shapes">
<pre>&hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts; 
Flowers

О Джареде Гилморе

Личная жизнь

Перевозчик Life

О Джареде Гилморе

Личная жизнь

Перевозчик Life

О Джареде Гилморе

Личная жизнь

Перевозчик Life

Джаред Гилмор удивительно талантлив и удивителен

Гилмор потрясающий!

Разве он не милый?

Творчество требует мужества
-Матисс

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Это связано с эффектом начальной загрузки css.

Попробуйте добавить ширину: 330px к вашему классу контейнера, например:

.container
{
background-color:green;
width: 330px;
}

Пожалуйста, смотрите изображение: это то, что вы пытаетесь достичь? enter image description here

0 голосов
/ 11 мая 2018

Попробуйте добавить дисплей: встроенный; в контейнерный класс? Трудно истолковать ваш вопрос.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...