1
저는 지난 주에 html과 css에 대해 배우고 있으며 실제 프로젝트를 시작하기 전에 다양한 것을 시도하고 있습니다.가짜 열을 사용하지 않고 똑같이 긴 열 만들기
나는 조금 장난되었으며, 이것은 내가 지금까지 무엇을 가지고 : http://jsfiddle.net/94ZDm/1/ http://jsfiddle.net/94ZDm/1/embedded/result/
<!doctype html>
<html>
<head>
<title>My Website</title>
<meta charset="utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="nav">
<ul id="navi">
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Archives</a></li>
<li><a href="">Links</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<div class="main-wrap">
<div class="main1">
<h1 id="top"> Hello World!!! </h1>
<p> First paragraph </p>
<h2> Things I Must Do Today</h2>
<ul>
<li> <a href="http://google.be" target="_blank" id="externallink"> Go to the mall </a> </li>
<li> Shop </li>
<li> Get gas</li>
<li> Drive home </li>
</ul>
<p><img src="img/koala.jpeg" alt="a koala sitting in a tree" align="left"/>
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p><a href="#top">Top</a></p>
</div>
<div class="main2">
<p> extra navigation... </p>
</div>
</div>
<footer>
© Copyright Blabla Land 2014
</footer>
</div>
</body>
</html>
합니다.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, Verdana, sans-serif;
background: green;
}
.container {
width:960px;
margin:0 auto;
}
.main-wrap {
overflow: hidden;
}
.nav {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.main1 {
float: left;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.main2 {
float: right;
width: 288px;
min-height: 1000px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
footer {
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
text-align: center;
}
#navi li {
display: inline-block;
list-style-type: none;
margin-right: 25px;
}
#navi {
text-align: center;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: #229944;
text-decoration: underline;
}
a:active {
color:red;
}
#externallink {
text-decoration: underline;
}
img {
padding: 10px;
}
어떻게 내 콘텐츠 열이 동등하게 긴해야합니까 가짜 열을 사용하지 않고 (한 주 한만큼 있어야 오른쪽)? 가짜 열은 현재 레이아웃을 사용하지 못하게합니까? 나는 또한 지정된 높이를 사용하고 싶지 않다. 자동으로 내용에 적응해야한다.
미리 감사드립니다.
하나의 게시물에 너무 많은 다른 질문이 있습니다. 한 번에 한 가지 질문을 스스로 제한하십시오. –
죄송합니다. 몰랐습니다. 내 게시물을 수정했습니다. 건배! – bgrt
나는 편집을 보지 못했기 때문에 아래의 나의 대답은 당신의 모든 3 가지 질문에 대한 답을 포함하고 있습니다. – Tarun