为什么这个Twitter脚本/ iframe不会浮动到右侧?

时间:2018-07-23 10:18:05

标签: html css

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/

1 个答案:

答案 0 :(得分:1)

正在工作。您添加了额外的},这就是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>