时间戳

首页 > 解决方案 > 如何在不弄乱页脚的情况下将两个 div 并排放置

html - 如何在不弄乱页脚的情况下将两个 div 并排放置

问题描述

这是我的 HTML，我想将 £first 放在 £second 旁边，但是当我尝试使用 float:left; 时，我的页脚会忽略我的内容并移动到我的页面顶部。有没有办法解决这个问题？

<!DOCTYPE html>
<html>
<link rel = "stylesheet" href = "style.css">
    <head>
        <title>Home</title>
    </head>
    <body bgcolor="lightgrey">
        <header>
            <h1>
                HEADING
            </h1>       
        </header>
        </div id="wrapper">
            <div id="first">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </div>  
            <div id="second">   
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </div>

        </div>
        <footer>
            Footer text here
        </footer>
</body>
</html>

这是CSS。我设法通过添加 display: flex; 来解决页脚问题。在 body 和 flex-direction: 列上；但现在 div 不会彼此相邻

body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
}
header{
        padding: 10px;
        background-color: black;
        height: 70px;
        opacity: 80%;
}
footer{
        padding: 10px;
        background-color: black;
        height: 70px;
        opacity: 80%;
        color: white;
        margin-top: auto;
}

}   
#wrapper {
  display: flex;
}

标签： htmlcssflexbox

解决方案

您的 div 中有错字 </div id="wrapper">应该是<div id="wrapper">

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 10px;
  background-color: black;
  height: 70px;
  opacity: 80%;
}

footer {
  padding: 10px;
  background-color: black;
  height: 70px;
  opacity: 80%;
  color: white;
  margin-top: auto;
}

#first {
  border: 1px solid blue;
}

#second {
  border: 1px solid red;
}

#wrapper {
  display: flex;
}
<body bgcolor="lightgrey">
  <header>
    <h1>
      HEADING
    </h1>
  </header>
  <div id="wrapper">
    <div id="first">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="second">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

  </div>
  <footer>
    Footer text here
  </footer>
</body>

</html>

推荐阅读