html - 为什么这个 twitter script/iframe 不浮动到右侧？

问题描述

body {
  background-color:olive;
  margin:0;
}
nav {
  background-color:aqua;
  position:sticky;
  top:0;
  border:1px solid red;
}
#container {
  max-height:1800px;
  display:flex;
  flex-direction:row;
}

#container > a {
  background-color:chocolate;
  padding:7px;
  border-radius:10px; 
  text-decoration:none;
}
#container > a:hover{
  opacity:0.5;
}
#logout {
  margin-left:auto;
}
.bonus {
  margin-left:10px;
}
/* nav is finally done after 1.5 hours lol and another 30mins  */

#bear-nest {
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
}
.theme {
  border-radius:20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img.theme { 
  width: 100%;
  max-width:200px;
} 
#bear {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:70%;
}
hr {
  border: 1px solid black;
}
.middle {
  display:flex;
  justify-content:center;
  align-self:flex-start;
  font-weight:bold;
}
.tags {
  font-family: monospace;
  background-color:blue;
  display:inline-block;
  color:white;
  padding:0px 40px 5px 15px;
  margin-top:15px;
  margin-left:5px;
}

.footerparent {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-direction:row;
  max-height:50%;
  flex-wrap:wrap;
}
.footerparent > ul,li,a {
  list-style-type:none;
  text-decoration:none;
  text-align:center;
}
.footerone ul>li {
  margin-bottom:3%;
  font-size:13px;
}

.footerone ul>li:hover {
  background-color:#dd9076;
  padding:0;
}

.footerparent> div {
  width:15%;
  text-align:center;
  margin-top:5%;	
}

.footerone >  ul>li:first-child { 
  background-color:yellow; 
  padding-bottom:5px;
  margin-bottom:10px;
  font-size:16px;
  min-width:100px;}
}

.float {
  float:right;
}

<body>
    <img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
    <nav>
        <div id="main-content">
            <div id="container">
                <a id="main" href="#" style="background-color:#bad455">Main</a>
                <a id="information" class="bonus" href="information.html">Information</a>
                <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
                <a id="media" class="bonus" href="media.html">Media</a>
                <a id="logout" href="logout.html">Log out</a>
            </div>
        </div>
    </nav>
    <main>
        <div class="float">
          <a class="twitter-timeline float" data-width="300" data-height="500" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        <div id="bear-nest">
            <div id="american-bear-nest">
                <div class="tags">
                  <p>Bears</p>
                </div>
                <div class="middle">
                  <p>The American black bear</p>
                </div>
                <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
                <div id="bear">
                  <p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species. It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p>
                </div>
                <div class="middle">
                  <p>Asian black bear</p>
                </div>
                <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
                <div id="bear">
                  <p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1] The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p>
                </div>

你好，我想让这个 twitter 脚本/iframe 浮动到这个页面的右侧。我一直在努力让它工作，但无论如何它都不会漂浮。我试过把这个脚本 div 放在任何地方，但它无论如何都不会浮动。所以任何帮助表示赞赏。

如果没有正确显示，这是 jsfiddle：

https://jsfiddle.net/48b9qos3/

标签： htmlcss

解决方案

它正在工作。您添加了额外}的内容，这就是 css 无法正常工作的原因。

.footerone >  ul > li:first-child { 
    background-color:yellow; 
    padding-bottom:5px;
    margin-bottom:10px;
    font-size:16px;
    min-width:100px;} // you have added here extra "}". so remove it.
 }

body {
     background-color:olive;
     margin:0;
}
 nav {
     background-color:aqua;
     position:sticky;
     top:0;
     border:1px solid red;
}
 #container{
     max-height:1800px;
     display:flex;
     flex-direction:row;
}
 #container > a {
     background-color:chocolate;
     padding:7px;
     border-radius:10px;
     text-decoration:none;
}
 #container > a:hover{
     opacity:0.5;
}
 #logout {
     margin-left:auto;
}
 .bonus {
     margin-left:10px;
}
/* nav is finally done after 1.5 hours lol and another 30mins */
 #bear-nest {
     display:flex;
     flex-direction:row;
     justify-content:flex-end;
     align-items:center;
}
 .theme {
     border-radius:20%;
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 img.theme {
     width: 100%;
     max-width:200px;
}
 #bear{
     text-align:center;
     margin-left:auto;
     margin-right:auto;
     width:70%;
}
 hr {
     border: 1px solid black;
}
 .middle {
     display:flex;
     justify-content:center;
     align-self:flex-start;
     font-weight:bold;
}
 .tags {
     font-family: monospace;
     background-color:blue;
     display:inline-block;
     color:white;
     padding:0px 40px 5px 15px;
     margin-top:15px;
     margin-left:5px;
}
 .footerparent {
     display:flex;
     justify-content:center;
     align-items:flex-end;
     flex-direction:row;
     max-height:50%;
     flex-wrap:wrap;
}
 .footerparent > ul,li,a {
     list-style-type:none;
     text-decoration:none;
     text-align:center;
}
 .footerone ul>li {
     margin-bottom:3%;
     font-size:13px;
}
 .footerone ul>li:hover {
    background-color:#dd9076;
     padding:0;
}
 .footerparent> div {
     width:15%;
     text-align:center;
     margin-top:5%;
}
 .footerone > ul>li:first-child {
     background-color:yellow;
     padding-bottom:5px;
     margin-bottom:10px;
     font-size:16px;
     min-width:100px;
}
 .float {
     float:right;
}

<body>
  <img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
  <nav>
    <div id="main-content">
      <div id="container" >
        <a id="main" href="#" style="background-color:#bad455">Main</a>
        <a id="information" class="bonus" href="information.html">Information</a>
        <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
        <a id="media" class="bonus" href="media.html">Media</a>
        <a id="logout" href="logout.html">Log out</a>
      </div>
    </div>
  </nav>
  <main>
  <div class="float">
    <a class="twitter-timeline float" data-width="300" data-height="500" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
  </div>
  <div id="bear-nest">
  <div id="american-bear-nest">
  <div class="tags">
    <p>Bears</p>
  </div>
  <div class="middle">
    <p>The American black bear</p>
  </div>
  <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
  <div id="bear">
    <p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.
      It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.
    </p>
  </div>
  <div class="middle">
    <p >Asian black bear</p>
  </div>
  <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
  <div id="bear">
    <p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]
      The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] 
    </p>
  </div>

html - 为什么这个 twitter script/iframe 不浮动到右侧？

问题描述

解决方案

推荐阅读