标题

Info1 Info2 Info3

页脚

我已将信息替换为Lorem Ipsum。

我制作了一个JSfiddle，可以查看here。

我的HTML看起来像：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="styles.css">
        <title>Profile</title>
    </head>
    <body>
        <div class="container">
            <div class="main-content">
            <div class="title">
                <h1>Lorem Ipsum</h1>
            </div>
            <div class="about">
                <h3>About Me</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lorem enim. Fusce ac varius ante. Mauris consequat, nibh viverra finibus consequat, erat mauris porttitor risus, id cursus nisi nunc id massa. Nullam imperdiet scelerisque lorem eget luctus. Nullam massa magna, luctus sit amet tellus vel, viverra ultrices velit. In commodo luctus odio ac tincidunt. Nullam feugiat erat tincidunt, cursus odio eu, accumsan lacus. Nunc sit amet tellus elementum, vehicula magna vel, feugiat tellus. Nullam et lorem iaculis lorem imperdiet commodo. Nulla facilisi. Etiam pulvinar vulputate auctor.</p>
            </div>
            <div class="school-life">
                <h3>School Life</h3>
                <p>Nam in quam euismod, sollicitudin arcu in, posuere erat. Phasellus ligula justo, efficitur quis odio eget, faucibus mollis sapien. Cras mi ipsum, sagittis ac orci porttitor, porta rutrum ipsum. Donec at libero molestie, venenatis eros et, faucibus lectus. Nullam ex enim, aliquam in tellus vel, porttitor egestas est. Nunc fermentum nisi justo, in ultricies arcu ornare sit amet. Duis nunc nulla, semper et libero ut, pulvinar condimentum sem. Aenean non eros id libero consectetur venenatis id nec magna. Fusce quis risus iaculis, tempus lectus eu, posuere nulla. Donec vitae posuere est, nec pellentesque elit. Phasellus mollis orci vel ex dignissim, sit amet pellentesque mauris luctus. Suspendisse eget dapibus sem.</p>
            </div>
            <div class="favourites">
                <h3>My Favourites</h3>
                <p>Aenean libero erat, pharetra sed feugiat id, tempus quis nulla. Donec a mi quam. Aenean nisl neque, blandit at scelerisque ac, finibus sit amet tellus. Fusce nec eros ac nulla suscipit molestie. Donec imperdiet nunc ac diam dignissim consectetur. Etiam malesuada cursus tellus, volutpat dignissim metus laoreet non. Etiam id quam hendrerit quam varius blandit vel consequat ex.</p>
            </div>
            </div>
            <div class="hopes">
                <h3>Hopes for the Future</h3>
                <p>Proin eget condimentum turpis. Mauris elementum at nisi nec condimentum. Donec maximus diam sapien, eu rhoncus erat volutpat quis. Nulla tortor felis, tincidunt id sagittis vel, laoreet in erat. Nunc ultricies sed tellus sit amet faucibus. Nulla molestie justo id odio molestie aliquam. In fermentum diam in sapien molestie porttitor.</p>
            </div>
        </div>
    </body>
</html>

我的CSS是：

.container {
    margin: auto;
    width: 1000px;
}
.title {
    width:auto;
    margin-top: 0px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
    padding-top: 0px;
}
.main-content {
    display: block;
}
.about {
    width: 333px;
    height: 700px;
    background-color: lightblue;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: inline;
}
.school-life {
    width: 300px;
    height: 700px;
    background-color: lightgreen;
    float: center;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: inline;
}
.favourites {
    width: 333px;
    height: 700px;
    background-color: moccasin;
    float: right;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: inline
}
.hopes {
    width:1000px;
    height:auto;
    background-color: black;
    color:white;
    padding: 10px 10px 10px 10px;
    bottom: 0;
}

任何帮助都非常感谢ty

Answer 1

在这里：http://jsfiddle.net/jm3p7moj/2/

我不会解释我做了什么，因为有太多事情发生了。刚看一下css浮动（你有浮动：中心;这是无效的css），溢出（我用它来清除浮动），清除浮动。

* {
    box-sizing: border-box;
}

这只是告诉浏览器，对于每个元素，填充都会向内。

HTML / CSS div标签无法正常工作

标题

1 个答案: