Question

如何在右侧的内容旁边显示我的Twitter-Widget？我尝试了很多方法，但没有任何工作，我不知道如何实现这一点。窗口小部件应位于页面右侧插槽的中心，并正常滚动页面。因为小部件在这里不起作用，所以我用一个名为id="theActualWidget"的div替换它。

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>

Answer 1

我相信你可以通过多种方式做到这一点，从头到尾：
你需要给#in div float left和width，例如50％和#right div给它左右浮动，宽度也是50％。
现在，您将能够看到它们彼此相邻，您将能够根据您的要求使用值。

如何在我的内容右侧放置Twitter Feed？

1 个答案: