-1
我想用#container（下面）來控制它包含的列的高度。我編碼的方式似乎不起作用。爲了幫助我識別發生了什麼，我將#container背景顏色設爲紅色。我很困惑。爲什麼#container不是紅色的？我錯過了什麼？ HTML和CSS文件在下面並且完整。任何幫助表示讚賞。CSS容器行爲
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
#menu li:first-child{
margin-left:75px;
}
@font-face{
font-family: Bleeding Cowboys;
src: url(assets/Bleeding_Cowboys.ttf);
}
a:link{
color:purple;
text-decoration:none;
}
a:hover{
color: red;
text-decoration:none;
}
#header{
display:block;
margin: auto;
width: 60%;
}
#header-img{
float:left;
margin-left:150px;
}
#header:hover{
display:block;
margin:auto;
width:60%;
img:(url)
}
#column1{
width:300px;
height:auto;
float:left;
margin-right:30px;
margin-left:30px;
border:solid;
border-width:3px;
border-color:grey;
}
#melies-portrait{
width:300px;
}
div p {
padding:10px;
}
#column2{
width:300px;
height 600px;
float:left;
margin-right:30px;
}
#melies-2-image{
}
#column3{
width:300px;
height:600px;
float:left;
}<!DOCTYPE html>
<html>
<head>
<title>Archivo Melies</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<a href="index.html"><img id="header-img"; src="images/header-logo-950-purplelink.png"
onmouseover="this.src='images/header-logo-950-redhover.png'"
onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<div>
<ul id="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="filmography.html">Filmography</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="merch.html">Merch</a></li>
<li><a href="about-the-archive.html>About the Archive">Archive</a></li>
</ul>
</div>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
</body>
</html>
我已經創建了一個演示https://fiddle.jshell.net/1hhdcyy8/，並且看到您的html不正常。但是，當我重新提出你的問題，我不明白你需要什麼 –
你有HTML錯誤。例如; 'id'header'' - > missing'='， 'id =「header-img」;' - >不需要';'。 – Berkay
你上次ul li href不關閉。這就是爲什麼..？請參閱下面的代碼片段。 –