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;
}
#item-2, #item-3, #item-1, #item-0 {
align-self:flex-start;
margin-top:5px;
}
#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;
}
#bear{
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
hr {
border: 1px solid black;
}
.font {
font: 24px "Pontano Sans", sans-serif;
}
.contacts {
background-color:#86efa0;
}
.onlyh3{
color: #333;
font: normal 18px "Pontano Sans", arial, sans-serif;
margin-top:50px;
}
#fullcontacts p {
margin-left:2px;
color: #2c2b2b;
font: normal 12px arial;
line-height: normal;
line-height: 18px;
}
.pls {
margin-left:20px;
}
.kenya {
margin: 30 30;
}
.note {
width:30%;
margin-top:30px;
}
.flexbox{
width:30%;
max-height:400px;
display:flex;
justify-content:center;
}
input {
background-color:yellow;
margin-bottom:13px;
}
.forms {
width:30%;
}
.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="index.html">Main</a>
<a id="information" class="bonus" href="information.html" >Statistics</a>
<a id="contacts" class="bonus" href="contacts.html" style="background-color:#bad455">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<div class="contacts">
<h4 class="font">Contacts</h4>
<div id="fullcontacts">
<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>
<h3>Contacts: Friends of Karura Forest Community Forest Association</h3>
<p>We would encourage you to become more than just a visitor to Karura. Please help to protect the forest by becoming a Friend.</p>
<h3>Membership & Administrative Enquiries</h3>
<p>Lucy Njoka: +254 (0)739 262092 or +254 (0)791 398371</p>
<a href="mailto:lnjoka@karurafriends.org">lnjoka@karurafriends.org</a>
<p>Admin Matters:<a href="mailto:info@karurafriends.org"> info@karurafriends.org</p></a>
<h3 class="onlyh3">Events & General Enquiries</h3>
<p>Lucy Njoka: +254 (0)739 262092 or +254 (0)791 398371</p>
<a href="mailto:lnjoka@karurafriends.org">lnjoka@karurafriends.org</a>
<p>John Chege, Chief Scout: +254 (0)724 215423</p>
<a href="mailto:jchege@karurafriends.org">jchege@karurafriends.org</a>
<p>Peter Njui, Security & Infrastructure: +254 (0)722 846264</p>
<a href="mailto:peter.njui@ke.g4s.com">peter.njui@ke.g4s.com</a>
<p><h3 class="onlyh3"><span style="font-weight:bold">PKF</span> e-mails</h3></p>
<p>General Enquiries:<a class="pls" href="mailto:"info@karurafriends.org">info@karurafriends.org</a>
<p>Comments & suggestions:<a class="pls"href="mailto:rafiki@karurafriends.org">rafiki@karurafriends.org</a></p>
<h3 class="onlyh3">More Useful Numbers</h3>
<div class="kenya">
<p style="font-weight:bold">Kenya Forest Service</p>
<p>John Orwa, Chief Forester. . . . . . . . . . . 0727 818963</p>
<p>Fredrick Mutisya, Forester . . . . . . . . . . 0722 581402</p>
<p>Corporal Okoth . . . . . . . . . . . . . . . . 0721 483017</p>
<p>Sergeant Catherine . . . . . . . . . . . . . . 0725 370990</p>
<p> Ag RC Dickson Njiru. . . . . . . . . . . . . . 0721 586793</p>
</div>
<div s class="Karura">
<p style="font-weight:bold" margin-top:50px">Friends of Karura Forest</p>
<p>John Chege, Chief Scout . . . . . . . . . . . 0724 215423</p>
<p>Peter Kamau, Dep. Chief Scout. . . . . . . . . 0720 350206</p>
<p>Peter Njui, G4S. . . . . . . . . . . . . . . . 0722 846264</p>
<p>Karanja Njoroge, KFK Chair . . . . . . . . . . 0729 030301</p>
<p>Cristina Boelcke-Croze, Vice-Chair . . . . . . 0702 633613</p>
<p>Chantal Mariotte, Projects . . . . . . . . . . 0791 398371</p>
</div>
<div class="note">
<p>Please make a note of these numbers and carry your mobile with you. Keep to the marked trails and exercise caution particularly when they are wet and slippery. Note that mobile reception is virtually non-existent along the Karura River between the Mau-Mau Caves and the Waterfall. Buy a map to know where you are in the forest. </p>
</div>
<h3>Maps</h3>
<p class="note">The New Revised Karura Forest Map is now out, showing all tracks, junctions and main forest features. Only 200/=, at main gates, K.F.E.E.T. Centre or administrative office at Triad House, 83 Muthaiga Road, Old Muthaiga.</p>
<p>An illustrated list of main bird species is available F.O.C.</p>
<p style="font-size:24px; font-weight:bold" >Opening hours: 06:00 AM to 18:00 PM</p>
<div class="flexbox">
<p>Friends of Karura Forest<Br>
Community Forest Association<br>
PO Box 63402-00619<br>
83 Triad House<br>
Limuru Road<br>
Muthaiga, Nairobi<br>
General Enquiries: +254 (0) 722 891 654<br>
rafiki@karurafriends.org<br>
info@karurafriends.org<br>
www.karurafriends.org<br></p>
</div>
<div class="forms">
<h3 class="only">Contact us</h3>
<form>
<label for="firstname">Last name:</label>
<input type="text" name="firstname" id="firstname" required placeholder="Enter your name" required=><br>
<label for="secondname">Second name:</label>
<input type="name" id="secondname" name="secondname" required placeholder="Enter second name"><br>
<label for="email">Enter your email here:</label>
<input type="email" id="email" name="mail" placeholder="Enter your email here" required><br>
<input type="submit" value="Submit">
</form>
</div>
</main>
</body>你好，我有个问题。现在我正在尝试iframe一个twitter网站，但我希望它被推到网站的右侧。问题是，当我刷新页面时，它会按预期在右侧显示iframe，但当页面加载完成时，它就会返回到默认位置。我不确定这里发生了什么。我已经尝试过margin-left:auto和float:right，但都不起作用。
p.S，代码可能没有正确显示，所以我做了一个jsfiddle，你可以清楚地看到它移回原来的位置。https://jsfiddle.net/zkxb9n4r/。如果有人帮我，我将不胜感激。谢谢
将iFrame的目标包裹在应用浮动的div中：
<div class="float">
<a class="twitter-timeline" data-width="300" data-height="500" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
</div>
...
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
查看更新的jsfiddlehttps://jsfiddle.net/zkxb9n4r/6/