1
如何在右側顯示我的內容旁邊的Twitter-Widget？我嘗試了很多方法，但沒有任何工作，我不知道如何實現這一點。小部件應該居中在頁面的右側，並且正常地滾動頁面。由於小部件不工作在這裏，我用一個名爲id="theActualWidget"的div取而代之。我如何才能在我的內容右側有一個Twitter Feed？
html {
height: 100%;
}
body {
background-image: url(media/image/background.gif);
background-repeat: repeat;
background-attachment: scroll;
background-position: center top;
background-size: auto;
margin: 0;
padding: 0;
height: 100%;
background-color: #111010;
}
#in {
width: 800px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: rgba(3, 3, 3, 0.5);
color: #f7f7f7;
font-family: "Helvetica";
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
font-size: 18px;
}
#in>* {
margin-left: 40px;
margin-right: 40px;
}
#main {
min-height: calc(100% - 186px);
padding-top: 120px;
text-align: center;
box-sizing: border-box;
z-index: 1;
position: relative;
}
#header {
background-color: #000000;
border-bottom: 6px solid #161616;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 200px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
position: relative;
background: #000000 url("media/image/header.jpg") no-repeat center 10%;
background-size: cover;
}
#page-title {
font-family: "sloganfont";
/* ODER "titlefont" was ist besser? */
letter-spacing: 2px;
font-size: 40px;
margin-top: 0px;
padding-top: 40px;
margin-bottom: 0px;
border-bottom: 3px solid #ED1C24;
}
p {
line-height: 130%;
font-family: "Open Sans";
}
footer {
background-color: #000000;
border-top: 6px solid #161616;
text-align: center;
right: 0;
bottom: 0;
left: 0;
height: 100px;
z-index: 98;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
position: relative;
margin-right: auto;
margin-left: auto;
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #555555;
font-weight: 600;
}
#theActualWidget {
background-color: blue;
width: 400px;
height: 600px;
}
@media (max-width: 800px) {
#in {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My-Website</title>
</head>
<body>
<header id="header">
</header>
<main>
<div id="in">
<h2 id="page-title">My Content</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="right">
<div id="twitter">
<div id="theActualWidget">
</div>
</div>
</main>
<footer>
<p id="credit">© 2017 XXXXXXXXX</p>
</nav>
</footer>
</body>
</html>