Question

第一个具有类＆＃34;容器＆＃34;的第一个div元素，并没有像＆＃34; mom＆＃34;中的其他div元素一样定位。 DIV。
我的目的是使一切都变得丰富多彩，因此可以很容易地看到尺寸我想把所有的div放到右边，但我需要将它们的文本放在中心位置我的左侧div容器，＆＃34; mom1＆＃34;没有同样的问题只有正确的div容器，＆＃34;妈妈＆＃34;行为不端。

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

 <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; 
</pre>
</div>


<div class="image main">  
<picture>
  <source media="(min-width: 650px)" srcset="..\images\DciZZIsXkAA1bYw.jpg">
  <source media="(min-width: 465px)" srcset="..\images\DcibzHLXkAA-vgV.jpg">
  <img src="..\images\gg.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>
<div class="mom"> 
<div class="container">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>

<div class="container2">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container3">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
</div>

<div class=mom1>
<p>
Jared Gilmore is amazing
  talented
    and amazing
</p>
<p class="display">Gilmore is amazing!
</p>

<p>Isn't he cute?</p>

<iframe class="iframe"  width="320" height="150" src="https://www.youtube.com/embed/W1A2mXbmxuM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<p>Creativity takes courage<br><cite>-Matisse</cite></p>
<footer></footer>

</div>

</body>
</html>

Answer 1

尝试添加display：inline;到容器类？很难解释你的问题。

Answer 2

它与效果bootstrap css有关。

尝试将width：330px添加到容器类中，如下所示：

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

请参阅图片：您正在尝试实现的目标是什么？

为什么我的右侧栏目的第一个div表现得很奇怪？（我的所有款式都相同）

2 个答案: