Question

所以我做了一个关于使用一些简单的CSS框创建网站的功课。我发现我的网站有3个问题：

<body>的高度等于<h1>的高度：

<div>的高度等于0：

<h2>的宽度等于其section：

我没有做任何改变或覆盖那些高度和宽度。它们是默认值，除了<h2>的宽度，我将其设置为30％宽度，但它仍然是100％。

我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML/CSS/JavaScript</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>HTML/CSS/JavaScript</h1>

    <div class="row">

        <section id="sec1" class="col-lg-4 col-md-6 col-xs-12">
            <h2>HTML</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <section id="sec2" class="col-lg-4 col-md-6 col-xs-12">
            <h2>CSS</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <section id="sec3" class="col-lg-4 col-md-6 col-xs-12">
            <h2>JavaScript</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

    </div>
</body>
</html>

css：

/* Font family */
body {
    font-family: Helvetica;
}

/* Simple Responsive Framework. */
.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}

/********** Base styles **********/
* {
  box-sizing: border-box;
}

section {
    dispay: block;
    color: #FFFFFF;
    border: 1px solid black;
    margin: 1%;
}

#sec1 {
    background-color: #ff471a;
}

#sec2 {
    background-color: #3399ff;
}

#sec3 {
    background-color: #ffad33;
}

p {
    padding: 5px;
    margin: 5px;
}

h1 {
    font-size: 1.75em;
    display: block;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 100px;
}

h2 {
    position: relative;
    top: 0;
    left: 70%;
    display: block;
    border: 1px solid black;
    font-size: 1.25em;
    width: 30%;
    text-align: center;
    margin: 0;
    background-color: #808080;
    color: #FFFFFF;
}

/********** Desktop view **********/
@media (min-width: 992px) {
    .col-lg-4 {
        float: left;
        width: 31.33%;
    }
}

/********** Tablet view **********/
@media (min-width: 768px) and (max-width: 991px) {
  #sec1, #sec2 {
    float: left;
        width: 48%;
  }
  #sec3 {
    float: left;
    width: 98%;
  }
}

/********** Mobile view **********/
@media (max-width: 767px) {
    .col-xs-12 {
        float: left;
        width: 98%;
    }
}

我完全不知道为什么我的CSS错了，请帮忙......

Answer 1

<强> 1。身体高度

身体的高度与其自身内容的高度有关。因为大块是float: left;，父母失去了与孩子的关系，高度崩溃。这可以通过向display: inline-block课程添加.col来解决。

<强> 2。 div的高度

实际上和上面一样。身体并没有考虑到这一点，因为你只有边距，并且它们被添加到框外。

第3。宽度h2

如果您将h2 CSS更改为：

h2 {
    display: block;
    border: 1px solid black;
    font-size: 1.25em;
    width: 30%;
    text-align: center;
    margin: 0 0 0 auto;
    background-color: #808080;
    color: #FFFFFF;
}

小解释：通过删除定位以及顶部和左侧属性，您将丢失块元素想要占据宽度100％的部分。

margin: 0 0 0 auto规则是将您的区块与右侧对齐。通过将左边距设置为auto，CSS知道他需要正确对齐（反之亦然）。

Answer 2

你需要的是clear:both;，因为你正在使用浮点数并且它几乎必须使用clear：浮点数之后或者会出现检查问题或空格错误。

所以你更新的html将是

<div class="row">

        <section id="sec1" class="col-lg-4 col-md-6 col-xs-12">
            <h2>HTML</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <section id="sec2" class="col-lg-4 col-md-6 col-xs-12">
            <h2>CSS</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <section id="sec3" class="col-lg-4 col-md-6 col-xs-12">
            <h2>JavaScript</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <div class="clr"></div>

    </div>

并在stylus.css中添加此类

.clr{clear:both;}

你完成了。请检查你的git，因为我也在那里合并了代码。如果您有任何问题，请告诉我。谢谢

Answer 3

创建网站时我喜欢做的第一件事就是这样做：

ActionName

这有助于页面知道无论如何，您的页面应始终为100％高度。这也将保持身体内的div和风格不会变得“100％＆＃39;高度。

进一步观察，我不确定你的作业要求，但如果你想将div的高度设为整页高度，请将其设置为html, body { height: 100%; }

至于你的h2标签，我不知道你想要完成什么，但如果你担心边距/宽度尝试这样的事情并使用填充：

height: 100%;

我希望这有帮助！

Answer 4

这会对你有所帮助。 https://jsfiddle.net/maheshv13/edq5m3pa/3/

StringBuilder

CSS高度和宽度问题

4 个答案: