Question

我正在处理我的个人页面。我想从列表中删除列。
我怎样才能做到这一点。我尝试了网格和列，它不起作用。由于某种原因，我在考虑一个Web工具包。有什么建议么？我还尝试浮动边距，宽度，位置，左侧等等。我被正式困住了。我确实使用了960像素的最大值。那是走错路了吗？我也将页面居中对齐吗？那也错吗？

/*body  styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
	/*grid grid-template: 1fr repeat(11,10px 1fr);*/
	grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
		10px
		[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
		10px
		[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
	10px
	[main-start] 1fr[main-end]
	[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
	margin: 0 auto;overflow:auto;padding:60px 50px; }*/
	
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*headers*/
h1,h2{font-family:'lobster', cursive;
	font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}

header{text-align: center;}
header{padding-top: 60px;position:relative; }



h2 {
  margin: 10px 0;
  
	font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
	
.nav a{display:inline-block;
	padding:15px 20px;
	text-decoration:none;
	text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
	text-align:center; background-color:slategray;
	display:block;}

/*columns*/
.column1{float:left;
width:900px;
marging:10px;}

.column2{float:left;
width:300px;margin:10px;}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
    <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
    
   	</head>
	  

  <body>
	  
	  <header role="banner">
		  
		  	  <nav role="navigation">  
	<div class="nav">
	 <a href="larry main.html">Home</a>
	<a href="about.html">About</a>
  <a href="portfolio.html">Portfolio</a>
		<a href="#">Downloads</a>
	<!-- Right navigation-->
		 
		 </div>
		  </nav>
		  
		  
		  <div class="content-wrap">
		<h1>Larry J Designs</h1>
			  <h2>Beginner web designer/ artist</h2>
	<div class="about" id="about-me">
		<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
		<p> Hello, I'm Larry J  , I currently live in the DC Metro area , i also  love working on art in my spare time. 
		As a teen  in high I use to love to draw and build websites ,  
		Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
		  Life has a long road to success , but on the road there are  that you have to learn to get to the next level .  Here are  mines bellow :</p></div></div>	
	
 </header>
 
	
	

	  <main role="main">
		
		  <section><!--my skill-->
		<div class="content-wrap">
		  
			<div class="column1">
		<h3>Skills in progress</h3>
			<ul>
			
			<li>HTML</li>
				<li>CSS</li>
				<li>Java script</li>
				<li>J query</li>
			</ul></div>
		
			
			<div class="column2">
	<h3>Next Skills to learn</h3>
				<ul>
			<li>Photoshop</li>
			<li>Illustrator</li>
			<li>Logo design</li>
			<li>Graphic arts</li>
			<li>T-shirt Design</li>
				</ul>
				</div></section>
	 </main>
			<!--my skill-->
			
		
		  
			<!--skills list end-->
		
	 <!--container end--> 
  <div class="footer">
		    <p>&copy;Larry J designs </p>
</div>

	
	  
  </body>

`。

Answer 1

我用column1而不是column2更新了display: inline-block和float的CSS，它可以工作了。我还使width成为了百分比。

/*body  styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
	/*grid grid-template: 1fr repeat(11,10px 1fr);*/
	grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
		10px
		[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
		10px
		[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
	10px
	[main-start] 1fr[main-end]
	[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
	margin: 0 auto;overflow:auto;padding:60px 50px; }*/
	
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*headers*/
h1,h2{font-family:'lobster', cursive;
	font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}

header{text-align: center;}
header{padding-top: 60px;position:relative; }



h2 {
  margin: 10px 0;
  
	font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
	
.nav a{display:inline-block;
	padding:15px 20px;
	text-decoration:none;
	text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
	text-align:center; background-color:slategray;
	display:block;}

/*columns*/
.column1{
display: inline-block;
width:calc(60%-10);
margin:10px;
vertical-align: top;
}

.column2{
display: inline-block;
width:calc(30%-10);
margin:10px;
vertical-align: top;
font-size: 
}
.content-wrap {

}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
    <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
    
   	</head>
	  

  <body>
	  
	  <header role="banner">
		  
		  	  <nav role="navigation">  
	<div class="nav">
	 <a href="larry main.html">Home</a>
	<a href="about.html">About</a>
  <a href="portfolio.html">Portfolio</a>
		<a href="#">Downloads</a>
	<!-- Right navigation-->
		 
		 </div>
		  </nav>
		  
		  
		  <div class="content-wrap">
		<h1>Larry J Designs</h1>
			  <h2>Beginner web designer/ artist</h2>
	<div class="about" id="about-me">
		<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
		<p> Hello, I'm Larry J  , I currently live in the DC Metro area , i also  love working on art in my spare time. 
		As a teen  in high I use to love to draw and build websites ,  
		Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
		  Life has a long road to success , but on the road there are  that you have to learn to get to the next level .  Here are  mines bellow :</p></div></div>	
	
 </header>
 
	
	

	  <main role="main">
		
		  <section><!--my skill-->
		<div class="content-wrap">
		  
			<div class="column1">
		<h3>Skills in progress</h3>
			<ul>
			
			<li>HTML</li>
				<li>CSS</li>
				<li>Java script</li>
				<li>J query</li>
			</ul></div>
		
			
			<div class="column2">
	<h3>Next Skills to learn</h3>
				<ul>
			<li>Photoshop</li>
			<li>Illustrator</li>
			<li>Logo design</li>
			<li>Graphic arts</li>
			<li>T-shirt Design</li>
				</ul>
				</div></section>
	 </main>
			<!--my skill-->
			
		
		  
			<!--skills list end-->
		
	 <!--container end--> 
  <div class="footer">
		    <p>&copy;Larry J designs </p>
</div>

	
	  
  </body>

此外，css代码中margin行的58属性名称上有一个错字。

希望有帮助，

最好

列表不适用于CSS中的列或浮点数

1 个答案: