Question

基本上我在网站上有2个主要容器，主要部分和右侧栏用于较小的小部件。我的目标是让这些小部件的背景能够无限地移动到他们受尊重的方面，而不会移动小部件中的实际内容。

这张照片显示了应该发生什么，而不是代码显示的内容。

@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); } 
*{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; margin: 0; padding: 0;}
body { background-color: #fffff; }
h1 {
    color: #1d1d1d; font-family: UbuntuG; font-size: 30;
}
h2 {
    color: #1d1d1d; font-family: UbuntuG; font-size: 18;
}
p {
    color: white; font-family: Arial; font-size: 16;
}
td  {
    text-align: center;
    padding: 0;
    height: 48px;
    min-width:48px;
}
a {
      display: block;
      text-decoration: none;
	  color: #1d1d1d;
	  font-family: UbuntuG;
	  font-size: 16;
     
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}

li {
    float: left;
}

li a {
    display: block;
    color: #1d1d1d;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #33d6ff; color: white;
}
.active {
    background-color: #00BFFF; color: white;
}


.selector {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1d1d1d;
}
/*Top full width container*/
.FullWidthContainer{ width:100%}
/*Content Container With max-width:1200px for example*/
.MainContainer{max-width:1200px; width:100%; margin: 0px auto; }
/* content containre divided in left-75% and right-25%}*/
.left{ width:70%; padding:2%; float:left;}
.spacer{ width:2%; padding:2%; float:center}
.right{ width:28%; padding:2%; float:right}
.right img{ width:100%}

<html>
  <head>
    <title>Radio</title>
    <meta content="??">
    <link rel="stylesheet" type="text/css" href="theme.css">
    <style>
        table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
        h1 { color: white; font-family: UbuntuG; font-size: 30; }
    </style>
  </head>
  <body>
    <div class="FullWidthContainer" style=""><ul>
		  <li><a class="active" href="#home">Home</a></li>
		  <li><a href="#about">Who are we?</a></li>
		  <li><a href="#contact">Contact</a></li>
	</ul></div>
		<!-- Start cssSlider.com -->
		<link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
		<!--[if IE]><link rel="stylesheet" href="cssslider_files/csss_engine1/ie.css"><![endif]-->
		<!--[if lte IE 9]><script type="text/javascript" src="cssslider_files/csss_engine1/ie.js"></script><![endif]-->
		 <div class="csslider1 autoplay ">
		<input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
		<input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
		<input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
		<input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
		<input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
		<input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
		<input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
		<ul>
			<li class="cs_skeleton"><img src="cssslider_files/csss_images1/download.jpg" style="width: 100%;"></li>
			<li class="num0 img slide"> <img src="cssslider_files/csss_images1/download.jpg" alt="" title=""></li>
			<li class="num1 img slide"> <img src="cssslider_files/csss_images1/download_1.jpg" alt="" title=""></li>
			<li class="num2 img slide"> <img src="cssslider_files/csss_images1/download_2.jpg" alt="" title=""></li>
		<!-- </ul><div class="cs_engine"><a href="http://cssslider.com">http://cssslider.com</a> by cssSlider.com v2.1</div> -->
		<div class="cs_description">
			<label class="num0"></label>
			<label class="num1"></label>
			<label class="num2"></label>
		</div>
		<div class="cs_play_pause">
			<label class="cs_play" for="cs_play1"><span><i></i><b></b></span></label>
			<label class="cs_pause num0" for="cs_pause1_0"><span><i></i><b></b></span></label>
			<label class="cs_pause num1" for="cs_pause1_1"><span><i></i><b></b></span></label>
			<label class="cs_pause num2" for="cs_pause1_2"><span><i></i><b></b></span></label>
			</div>
		<div class="cs_arrowprev">
			<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
			<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
			<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
		</div>
		<div class="cs_arrownext">
			<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
			<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
			<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
		</div>
		<div class="cs_bullets">
			<label class="num0" for="cs_slide1_0"> <span class="cs_point"></span>
				<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download.jpg" alt="" title=""></span></label>
			<label class="num1" for="cs_slide1_1"> <span class="cs_point"></span>
				<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_1.jpg" alt="" title=""></span></label>
			<label class="num2" for="cs_slide1_2"> <span class="cs_point"></span>
				<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_2.jpg" alt="" title=""></span></label>
		</div>
		</div>
		<!-- End cssSlider.com -->

    <div class="FullWidthContainer">
		<div class="MainContainer">
			<span style="background-color: #161616;" class="left"><center>
				<iframe height="400px" width="550px" scrolling="yes" frameborder="0" src=https://hellodj.airtime.pro/embed/weekly-program></iframe>
			</center></span>
			<div style="background-color: #161616;" class="right">
				<iframe id="embed_player" frameborder="0" width="280" height="216" src="https://hellodj.airtime.pro/embed/player?stream=auto"></iframe>
			</div>
        </div>
    </div>
  </body>
</html>

将小部件无限扩展到单个方面

0 个答案: