Question

我正在创建我的第一个网站，我必须有一个侧边栏。所以我决定加入twitter嵌入式时间表。当我改变窗口的大小时，问题就开始了。我有响应式菜单，但Twitter嵌入式时间轴总是与我的内容重叠。当我认为窗口太小时，我试过分配最大高度或宽度。使用display-none ment，段落旁边会有空隙空间，我不想解决这个问题。我不喜欢我在互联网上找到的切换选项。你有什么建议？

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}


header {
	background-color: #000000;
	opacity: 0.9;
	width: 100%;
	padding: 40px 0; /* 40 hore a dole 0 po stranach */
	text-align: center;
	color: white;
}

a{
	text-decoration: none;
	color: inherit;
}

nav ul {
	background-color: #000000;
	overflow: hidden;
	color: white;
	padding: 0;
	text-align: center;
	margin: 0;
	opacity: 0.7;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4;
}

nav ul li {
	display: inline-block;
	padding: 20px;
}
nav ul li:hover{
	opacity: 0.75;
}

section {
	line-height: 1.5em;
	font-size: 0.9em;
	width: 75%;
	margin: 0 auto;
}
h1 {
	display: block;
	color: #000000;
    font-size: 10em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.handle {
	width: 100%;
	color: white;
	background-color: #000000;
	opacity: 0.75;
	text-align: left;
	box-sizing: border-box; /*100 sirka a paddding by pretekala */
	padding: 15px 10px;
	cursor: pointer; 
	display: none;
}
i{
	float: right;
}

.uvitanie {
	background-color: #ffffff;
	margin: 10px 320px 10px 10px;
}
@media screen and (max-width: 700px) {
	nav ul {
		max-height: 0; /*lepsie ako nastavovanie vysky */
	}
	.showing {
		max-height: 20em;
	}
	nav ul li {
		width: 100%;
		box-sizing: border-box; /*100 sirka a paddding by pretekala */
		padding: 15px;
		text-align: center;
	}
	.handle{
		display: block;
	}

	.sidebar {
		
	}

}

.sidebar {
	margin: 10px;
	border-radius: 5px;
	padding: 15px;
	font-size: 100%;
	float: right;
	width: 350px;
}

h1 {
	display: block;
	text-align: center;
    font-size: 3.5em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
	display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 10px;
    margin-right: 0;
    font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
	<script>window.twttr = (function(d, s, id) {
  	var js, fjs = d.getElementsByTagName(s)[0],
 	   t = window.twttr || {};
 	 if (d.getElementById(id)) return t;
 	 js = d.createElement(s);
 	 js.id = id;
	 js.src = "https://platform.twitter.com/widgets.js";
	 fjs.parentNode.insertBefore(js, fjs);

	  t._e = [];
	  t.ready = function(f) {
  	  t._e.push(f);
	  };
 	 return t; //script pre twitter
	}(document, "script", "twitter-wjs"));</script> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<title>Svet Fruscianteho</title>
	<script src="https://use.fontawesome.com/c62e354f4b.js"></script>
	<link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body>
	<header>
			Svet Fruscianteho
	</header>
	<nav>
		<ul>
			<li><a href="index.html">Domov</a></li>
			<li><a href="albumy.html">Albumy</a></li>
			<li><a href="rhcp.html">RHCP</a></li>
			<li><a href="projekty.html">Projekty</a></li>
		</ul>
		<div class="handle">Menu
				<i class="fa fa-bars" aria-hidden="true"></i>
		</div>

	</nav>

	<aside class="sidebar">
		<p>
			<a class="twitter-timeline" data-width="350" data-height="500" data-theme="light" href="https://twitter.com/johnfrusciante">Tweets by johnfrusciante</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8">
				//samotny embedded timeline
			</script>
		</p>
	</aside>
	
	<section>
		<h1>Novinky</h1>
		<h2>John Frusciante strávil Vianoce s vdovou slávneho rockera.</h2>
		<p class="uvitanie">
			Text in foreign language and Instagram embedded photo.		
		</p>
	</section>

	<script>
	$(".handle").on( "click", function() {
            $("nav ul").toggleClass("showing");
        }); //script for the menu
	</script>

	
</body>
</html>

Answer 1

尝试将其放入CSS中，当您想要摆脱推特锚时，可能需要更改宽度。

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.twitter-timeline {
display:none;
}
  }

如果你不喜欢void space，请使用section元素放置一个类，如

<section class="section">
//section content
</section>

然后css阻止

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.section  {
margin-top:-40px;
}
  }

或者你想要多少个。

隐藏Twitter边栏

1 个答案: