Question

我正在建立一个网站，并且使用通用标签。但是，当我更改长度时，div的位置也会更改。为什么会发生？

我尝试几次更改#body的长度，我发现当它为607px时，这是正常的，但是当它为608px时，它将出现在图像下方。

* {
  margin: 0px;
  padding: 0px;
}

#header {
  width: 100%;
  height: 150px;
}

#logo {
  width: 300px;
  height: 150px;
  float: left;
}

#heading {
  width: 1140px;
  height: 150px;
  float: right;
}

#welcome {
  width: 1140px;
  height: 75px;
}

#links {
  width: 1140px;
  height: 75px;
}

#logo>a {
  text-align: center;
  line-height: 150px;
  text-decoration: none;
}

#welcome>h1 {
  text-align: center;
  line-height: 75px;
}

#welcome>h1>a {
  text-decoration: none;
}

#links>ul {
  width: 1140px;
  height: 75px;
}

#links>ul>li {
  width: 228px;
  height: 75px;
  list-style: none;
  float: left;
}

#links>ul>li>a {
  display: block;
  line-height: 75px;
  text-align: center;
  font-size: 35px;
  text-decoration: none;
}

#links>ul>li>a:hover {
  background-color: orange;
}

#body {
  width: 100%;
  height: 608px;
  background-color: rgb(27, 27, 31);
}

<div id="header">
  <div id="logo">
    <a href="homepage.html"><img src="image_here.png"></a>
  </div>

  <div id="heading">
    <div id="welcome">
      <h1>Welcome to here!</h1>
    </div>

    <div id="links">
      <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
      </ul>
    </div>
  </div>
</div>

<div id="body">

</div>

<div id="footer">

</div>

我希望它应该像https://imgur.com/1Ixvwd6。但是结果是https://imgur.com/SqC6zDV。

Answer 1

#body被其中的图像“卡住”的原因是因为图像向左浮动，其后的任何元素都将跟随该图像。您需要clear浮点数。

在clear:left;上添加clear:both;或#body，以清除前面的所有浮动元素。

Answer 2

尝试一下：-

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            .clear{
                clear: both;
            }
            #header {
                width: 100%;
                height: 150px;
            }
            #logo {
                width: 25%;
                height: 150px;
                float: left;
            }
            #heading {
                height: 150px;
                float: right;
                width: 75%;
            }
            #welcome {

                height: 75px;
            }
            #links {

                height: 75px;
            }
            #logo > a {
                text-align: center;
                line-height: 150px;
                text-decoration: none;
            }
            #welcome > h1 {
                text-align: center;
                line-height: 75px;
            }
            #welcome > h1 > a {
                text-decoration: none;
            }
            #links > ul {

                height: 75px;
            }
            #links > ul > li {
                width: 20%;
                height: 75px;
                list-style: none;
                float: left;
            }
            #links > ul > li > a {
                display: block;
                line-height: 75px;
                text-align: center;
                font-size: 35px;
                text-decoration: none;
            }
            #links > ul > li > a:hover {
                background-color: orange;
            }
            #body {
                width: 100%;
                height: 608px;
                background-color: rgb(27, 27, 31);
            }
        </style>
    </head>

    <body>
        <div id="header">
            <div id="logo">
                <a href="homepage.html"><img src="image_here.png" /></a>
            </div>

            <div id="heading">
                <div id="welcome">
                    <h1>Welcome to here!</h1>
                </div>

                <div id="links">
                    <ul>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                        <li><a href="">Link 5</a></li>
                        <div class="clear"></div>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div id="body">

        </div>

        <div id="footer">

        </div>


    </body>

</html>

Answer 3

您只需更改CSS：

#header
{
    width: 100%;
}
#image
{
    height: 100%;
    width: 100%;
}
#logo
{
    width: 20%;
    float: left;
}
#heading
{
    width: 80%;
    float: right;
}

您的问题在这里。

#header {
    width: 100%;
    height: 150px;
}
#logo {
    width: 300px;
    height: 150px;
    float: left;
}
#heading {
    width: 1140px;
    height: 150px;
    float: right;
}

您的主div（标头{width = 100％}）但是（#logo +标题）宽度= 1440，所以问题出在这里，而且没有响应

Answer 4

您的代码结构错误。尝试使用flex。您想要这样的东西吗？

html2pdf().from(element).set(opt).save().then(()=>{
    window.location.href = "index.php";
});

body{
  margin:0
}

*{
  text-transform:uppercase;
  color:white;
}

.header{
  display:flex;
}

.first{
  flex-basis:25%
}

.logo{
  display:flex;
  justify-content:center;
  text-align:center;
  align-items:center;
  background:red;
  padding:30px;
  font-size:18px;
}

.right{
  flex-basis:75%;
  display:flex;
  flex-direction:column
}

.welcome{
  flex-grow:1;
  background:blue;
  display:flex;
  align-items:center;
  justify-content:center;
}


.links{
  background:green;
}

.menu{
  display:flex;
  align-items:center;
  justify-content:space-around;
  list-style:none;
  padding:0;
}

.menu a{
  text-decoration:none
}

div的位置不正确

4 个答案: