Question

我不知道为什么我的html中的身体部分效果不佳。身高是16px而不是全长。我不明白。我的HTML＆amp; css来源就是这个。

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        portfolio
    </title>
    <link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
</head>
<body>
    <div id="wrapper">
        <div class="fixed_menu">
            <h1><a class="home" href="index.html">Resume of Jacob</a></h1>
            <div class="logo">
                <a class="menu" id="project" href="project.html"><span>Project</span></a>
                <a class="menu" id="available" href="available.html"><span>Available</span></a>
                <a class="menu" id="contact" href="contact.html"><span>Contact</span></a>
            </div>
        </div>
        <br>
        <div class="display">
            <div class="box1">
                <a href="project.html">
                    <img src="img/project.jpg" width="490" height="500" onmouseover="this.src='img/language.jpg';" onmouseout="this.src='img/project.jpg';" />
                </a>
            </div>
            <div class="blank1"></div>
            <div class="box2">
                <a href="available.html">
                    <img src="img/language.jpg" width="340" height="340" onmouseover="this.src='img/project.jpg';" onmouseout="this.src='img/language.jpg';" />
                </a>
            </div>
            <div class="blank2"></div>
            <div class="box3">
                <a href="contact.html">
                    <img src="img/contact.jpg" width="340" height="140" onmouseover="this.src='img/project.jpg';" onmouseout="this.src='img/contact.jpg';" />
                </a>
            </div>
        </div>
    </div>
</body>
</html>

mystyles.css 我觉得css是个问题。但我可以发现错误。请找出我的错误。

            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
:focus{}
body{line-height:1;color:black;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:""}
blockquote,q{quotes:"" ""}
body {
    font-family: "맑은 고딕";   
    background-color: #f5f9fa;
    margin: 0px;
}
h1{
    font-size: 50px;
}
#wrapper {
    display: block;
    width:100%;
    margin:0 auto;
    text-align : center;
    vertical-align: center;
}
.fixed_menu {
    background-color: white;
    width:100%;
    height : 150px;
    text-align: center;
    vertical-align: center;
    position:fixed;
}
.logo {
    display: block;
    width:100%;
    margin: 0 auto;
}
.menu {
    display: block;
    width: 100px;
    height: 30px;
    top:40px;   
    margin: 0 auto;
    float: left;
    position:relative;
    color:darkgray;
}
a {
    text-decoration: none;
    display: block;
}
.home {
    position:relative;
    top:10px;
    color:#1C1E1F;
}
#project {
}
#available{
}
#contact {
}
.display {
    display: block;
    width: 855px;
    margin:0 auto;
    position:relative;  
    top:200px;
}
.box1 {
    width: 490px;
    height : 500px;
    float: left;
    position:relative;
}
.box2 {
    width: 340px;
    height : 340px;
    float: left;
    position:relative;
}
.box3 {
    width: 340px;
    height : 140px;
    float: left;
    position:relative;
}
.blank1 {
    width: 20px;
    height: 500px;
    float: left;
    position:relative;
}
.blank2 {
    width:345px;
    height: 20px;
    float: left;
    position:relative;
}

Answer 1

我认为问题在于你的浮动：左，移除浮动：离开所有这些，你应该看到全身的身体。但同样，它会摧毁你的盒子造型，我会认真地建议使用像bootstrap这样的东西并对它进行改进，因为你当前的造型太复杂了，例如你正在使用＆＃34;空白＆＃34;要创建空间，这可以通过您的盒子类的填充/边距轻松完成，甚至可以更好地使用引导列。

.box1 {
    width: 490px;
    height : 500px;
    float: left; <---remove
    position:relative;
}
.box2 {
    width: 340px;
    height : 340px;
    float: left; <---remove
    position:relative;
}
.box3 {
    width: 340px;
    height : 140px;
    float: left; <---remove
    position:relative;
}
.blank1 {
    width: 20px;
    height: 500px;
    float: left; <---remove
    position:relative;
}
.blank2 {
    width:345px;
    height: 20px;
    float: left; <---remove
    position:relative;
}

html中的body部分运行良好

1 个答案: