1
右のコンテンツの横にTwitterウィジェットを表示するにはどうしたらいいですか？私は多くの方法を試してみましたが、うまくいかないものはありませんでした。ウィジェットは、ページの右側の中央に配置する必要があります。ウィジェットはここでは動作しないので、私はid="theActualWidget"という名前のdivでそれを置き換えます。
あなたは50％、たとえば、#INのDIVの左フロートと幅を与える必要があります：私はあなたが私の頭の上から、いくつかの方法でこれを行うことができると信じているコンテンツの右側にTwitterフィードを浮かべるにはどうすればよいですか？
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>