如何分隔容器以便它们不会在移动设备上重叠？

时间：2018-01-31 02:37:38

标签： jquery html css mobile

我完成了一个水平滚动网站的构建，花了很长时间才能将所有内容正确排列，并使滚动向侧面移动。现在我注意到，在移动设备上，有些物品相互重叠。香港专业教育学院尝试了许多不同的代码，让他们到他们应该在移动设备的地方，但然后他们没有在计算机上。如何阻止这些容器div重叠？

我的网站最常发生的是http://padmorejordan.com/about%20me.html

＆＃13;
＆＃13; 
@charset "UTF-8";

*{
    margin: 0px;
    padding: 0px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#sidebar{
    position: fixed;
    width: 200px;
    height: 100%;
    background: rgba(17,16,17,.80);
    left:-200px;
    transition: all 500ms linear;
}

#sidebar.active {
    left: 0px;
}


#sidebar ul li{
    color: rgba(255,255,255,1.00);
    list-style: none;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(100,100,100,1.00)
}


#sidebar .toggle-btn {
    position: absolute;
    left: 230px;
    top: 20px;
}

#sidebar .toggle-btn span {
    display: block;
    width: 30px;
    height: 5px;
    background: #151719;
    margin: 3px 0px;
}

*{
    margin: 0px;
}


html, body{
    height:100%;
}

.wrapper{
    height: 100%;
    width: 100%;
    background-color: rgba(244,244,244,1.00);
}


.surroundContainer{
    height: 100%;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
}

.surroundContainer p{
    color:rgba(244,244,244,1.00);
}
.Hpage{
    display: inline-block;
    height: 100%;
    width: 100%;
	
    background-color:rgba(244,244,244,1.00);
}
.pageHome{
    margin: auto;
    height: 100%;
    width: 100%;
    display: inline-block;
    background-color:rgba(244,244,244,1.00) ;
}


#img1{
    float: center;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}
#img2{
    float: right;
    margin-left: auto;
    margin-right: 5%;
    margin-top: 10%;
    margin-bottom: auto;
    display: block;
}

.pageHome{
    margin: auto;
    height: 99%;
    width: 99%;
    display: inline-block;
    background-color:rgba(244,244,244,1.00) ;
}

.textpage{
    margin-top: auto;
    width: 98%;
    height: 98%;
    display: inline-block;
	
    background-color: rgba(245,245,245,1.00);
	
}

#img1{
    float: center;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}
#img2{
    float: right;
    margin-left: auto;
    margin-right: 5%;
    margin-top: 10%;
    margin-bottom: auto;
    display: block;
}

#paragraph{
    word-wrap: break-word;
    padding-left: 10%;
    padding-right: 10%;
    margin-left:auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}

.table{
    margin: 0px auto;
    margin-top: 10%;
    margin-bottom: auto;
}



.barpage{
    height: 78%;
    width: 78%;
    overflow: auto;
    white-space: nowrap;
    display: inline-block;
    margin-left: 10%;
    margin-right: 10%;	
}


.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
	
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    border-radius:3px;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    width:110px;
    font-weight:bold;
    font-size:13px;
    color:#ffffff;
    background:#6adcfa;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:35px;
    line-height:35px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
    height:35px;
    width:0px;
    background:#6adcfa;
	
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#ffffff;
    color:rgba(0, 0, 0, 0.4);
}

td{
    table-layout: fixed;
    width: 900px;
    text-align: center;
}
pre {
    white-space: pre-wrap;
	
    text-align: center;
    max-width: 900px;
	
    word-wrap: break-word;
    text-indent: 30px;
    letter-spacing: 1px;
    line-height: 1.6;
    word-spacing: 2px;
}

h2{
    text-decoration: underline;
}
＆＃13; 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Jordan Padmore | About page</title>

<meta name="description" content="Hi, I'm Jordan Padmore, a Graphic and Motion Designer who specializes in learning and executing new creative strategies in fastest possible time. From advertising and branding to motion graphics and web design or coding, i have learned it all.">

<meta name="keywords" content="HTML,CSS,XML,JavaScript,Graphic Designer, Graphic Design Portfolio,Padmore,Jordan,Art,Gallery,About,Video,Motion Graphics,Contact,Scangift,Luminart,Ledology,A90sKid,Raincoast Dog Rescue,Basketball,Undertales,Adobe,Photoshop,Illustrator,Indesign,Cinema4D,Dreamweaver,Wordpress,Toronto,Ontario,Canada,Canadian,Artist">

<meta name="Content-Type" content="http://padmorejordan.com/images/5.jpg">

<meta name="twitter:card" value="summary"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:title" content="Jordan Padmore | Independant Graphic And Motion Designer Portfolio" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.padmorejordan.com/" />
<meta property="og:image" content="http://padmorejordan.com/images/5.jpg" />
<meta property="og:description" content="Hi, I'm Jordan Padmore, a Graphic and Motion Designer who specializes in learning and executing new creative strategies in fastest possible time. From advertising and branding to motion graphics and web design or coding, i have learned it all." /> 




<script>
	function toggleSidebar(){
		document.getElementById("sidebar").classList.toggle('active');
		
		
	}
	
	</script>
<link rel="icon" type="images/png" href="images/jp-logo.png"/>
<link href="AboutMe.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/jquery.mousewheel.js"></script>
 
<script>
$(function() {
	$("html, body, *").mousewheel(function(event, delta) {
		this.scrollLeft -= (delta * 80);
		this.scrollRight -= (delta * 80);
		event.preventDefault();
	});
});
</script>
</head>

<body>

<div id="sidebar">
	<div class="toggle-btn" onclick="toggleSidebar()" onmouseover="" style="cursor: pointer;">
		<span></span>
		<span></span>
		<span></span>
		
	</div>
	
	<a href="index.html"><img src="images/gallery/logo-idea-3.png"></a>
	<ul>
		<a href="home page.html"><li>
		Home
		</li></a>
		<a href="Gallery.html"><li>
		Gallery
		</li></a>	
		<a href="Video.html"><li>
		Videos
		</li></a>
		<a href="about.html"><li>
		About	
		</li></a>
		<a href="contact.html"><li>
		Contact	
		</li></a>
		
	</ul>
	
</div>

 <!--wrapper for entire page-->
 	 <div class="wrapper">
 	 	<!--home view portion-->
 	 <!--<div class="view"></div>-->
 	 	<!-- div that will contain horizontal scroll items-->
 	 	<div class="surroundContainer">
 	 		<div class="pageHome">
 	 		  <h4><img id="img2" src="images/block-lettering.png" width="30%">
 	 		    <img id="img1" src="images/me2.png" width="40%">
 	 		    
 	 		    
 		      </h4>
 	 		</div>
 		  <div class="textpage">
 		  		  
 		 <table class="table" style="border: 1px solid rgba(124,124,124,1.00)" >
 		 	
 		 	<tr>
 		 		
 		 		<td>
 		 			
 		 			
 		 			
 <h2>HI, MY NAME IS JORDAN PADMORE</h2>
<pre>
 I am an up and coming force in the field of Graphic Design. Born and raised in Toronto, Ontario, I learned to appreciate art and structure from the media and artwork found throughout the city. I love to create eye-catching graphic designs, whether its 2D art in Photoshop and Illustrator, 3D in Cinema 4D, or motion graphics in After Effects. My specialty from graduating George Brown College is in Advertising design, but have developed other skills in medias and design aspects, such as web design, landscape and interior design, story boarding, photography, and branding. Some of my latest work for clients includes the creation of innovative app ideas, building interactive exciting websites for companies in Italy, and developing title sequences for TV and YouTube web shows. In my free time, you can catch me snowboarding in the mountains, biking through the city, or just fishing all year round, even if I have to break through ice. I'm a hard-working, focused individual who believes being passionate about your work and drive to finish a project is a must have. <a href="contact.html">Contact me</a> to see what I can do to help bring your advertising, branding, and web design needs to life.
 		 	        </pre>
 		 		</td>
 		 	</tr>
 		 	
 		 </table>
 		  
 		  </div>
 		   		  
 		   		  
   		  <div class="barpage">
 		   		  
 		  <div class="Skill bars">
 	 		
 	 		<h1>Working Skills</h1>

<div class="skillbar clearfix " data-percent="100%">
	<div class="skillbar-title" style="background: #3498db;"><span>Photoshop</span></div>
	<div class="skillbar-bar" style="background:rgba(65,159,223,1.00);"></div>
	<div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="90%">
	<div class="skillbar-title" style="background: #e67e22;"><span>Illustrator</span></div>
	<div class="skillbar-bar" style="background:rgba(244,153,73,1.00);"></div>
	<div class="skill-bar-percent">90%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="85%">
	<div class="skillbar-title" style="background:rgba(123,66,199,1.00)"><span>Indesign</span></div>
	<div class="skillbar-bar" style="background:rgba(68,6,96,1.00)"></div>
	<div class="skill-bar-percent">85%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="80%">
	<div class="skillbar-title" style="background:rgba(203,37,73,1.00)"><span>After Effects</span></div>
	<div class="skillbar-bar" style="background:rgba(140,13,41,1.00)"></div>
	<div class="skill-bar-percent">80%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
	<div class="skillbar-title" style="background: #4288d0;"><span>Wordpress</span></div>
	<div class="skillbar-bar" style="background: #124e8c;"></div>
	<div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="60%">
	<div class="skillbar-title" style="background: #27ae60;"><span>HTML CSS</span></div>
	<div class="skillbar-bar" style="background: #2ecc71;"></div>
	<div class="skill-bar-percent">60%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="60%">
	<div class="skillbar-title" style="background: #124e8c;"><span>Cinema 4D</span></div>
	<div class="skillbar-bar" style="background: #4288d0;"></div>
	<div class="skill-bar-percent">60%</div>
</div> 
	 					

	 		</div>
 		  </div>
 		   		  
 	   </div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

对于响应式设计，首先在HTML页面中设置viewPort并使用bootstrap 

<meta name="viewport" content="width=device-width, initial-scale=1">

在bootstarp中，无需手动定义div的位置和宽度。BootStap

相关问题
最新问题