时间戳

首页 > 解决方案 > 如何停止 div 中的浮点数以与另一个 div 中的另一个浮点数交互？

html - 如何停止 div 中的浮点数以与另一个 div 中的另一个浮点数交互？

问题描述

我正在为学校制作网站，但我的 css 代码有问题。我想将 section1 和 section2 放在标题下方，使其看起来像这样： 通缉

问题是它看起来像那样（问题是左边这个巨大的差距）： REALITY

我知道问题出在标题和导航栏上的浮动，但我不知道如何保持标题外观和两个框（“section1”和“section2”，分组为“content”）。

CSS代码：

  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  color: black;
  background-color: white;
  font-size: 16px;
  text-align:justify;
  text-justify:inter-word;
  
}

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #101010;
}

.header_nav {
  width: 65%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  font-size: 32px;
  font-weight: 600;
}

.nav {
  float: right;
  height: 50%;
  line-height: 70px;
}

.nav ul li {
  display: inline-block;
  vertical-align: middle;
  line-height: normal
}

.nav-option {
  height: 100%;
  display: table;
  float: left;
  padding: 0px 20px;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  color: white;
  font-family: "Trebuchet MS";
  font-size: 20px;
  font-weight: 50;
}

.nav-option:hover {
    text-decoration: underline;
}

.content {
  overflow: hidden;
}

.section1 {
  background-color: red;
  width: 40%;
  height: 300px;
  margin: 1%;
  float: left;
  border: inset #101010 6px ;
}

.section2 {
  background-color: blue;
  width: 40%;
  height: 300px;
  float: right;
  margin: 1%;
  border-left: solid #101010 10px;
}

.section2:hover {
  transform: scale(1.05);
}

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Histoire de l'Informatique</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="header">
      <div class="header_nav">
        <div class="logo">
          <img src="logo.png">
          <h1> HISTOIRE DE L'INFORMATIQUE </h1>
        </div>
        <div class="nav">
          <nav>
            <ul>
             <li><a href="" class="nav-option">Données</a></li>
             <li><a href="" class="nav-option">Algorithmes</a></li>
             <li><a href="" class="nav-option">Langages</a></li>
             <li><a href="" class="nav-option">Machines</a></li>
            </ul>
         </nav>
        </div>
      </div>
    </<div>
    <div class= "content">
      <section class="section1">
        <h1>Données</h1>
       <article>
        </article>
      </section>
      <section class="section2">
       <h1>Algorithmes</h1>
       <article>
       </article>
      </section>
    </div>
    <script src="script.js"></script>
  </body>
</html>

谢谢你的帮助 ！

标签： htmlcss

解决方案

你的例子似乎对我有用，只要.container有一个width: 100%就可以了。

但是对于您想要的，我会使用以下内容：

.container {
  display: flex;
  align-items: center;
  justify-content: space-evenly; // google all the different options for this
}

// Get rid of the `float` properties on the sections, you won't need them

下面是您在片段中的原始代码，并且使用该宽度属性它对我有用。

但我强烈建议切换到浮动框而不是浮动框，因为它会给你更多的控制和更好的结果。

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  color: black;
  background-color: white;
  font-size: 16px;
  text-align:justify;
  text-justify:inter-word;
  
}

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #101010;
}

.header_nav {
  width: 65%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  font-size: 32px;
  font-weight: 600;
}

.nav {
  float: right;
  height: 50%;
  line-height: 70px;
}

.nav ul li {
  display: inline-block;
  vertical-align: middle;
  line-height: normal
}

.nav-option {
  height: 100%;
  display: table;
  float: left;
  padding: 0px 20px;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  color: white;
  font-family: "Trebuchet MS";
  font-size: 20px;
  font-weight: 50;
}

.nav-option:hover {
    text-decoration: underline;
}

.content {
  width: 100%;
  overflow: hidden;
}

.section1 {
  background-color: red;
  width: 40%;
  height: 300px;
  margin: 1%;
  float: left;
  border: inset #101010 6px ;
}

.section2 {
  background-color: blue;
  width: 40%;
  height: 300px;
  float: right;
  margin: 1%;
  border-left: solid #101010 10px;
}

.section2:hover {
  transform: scale(1.05);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Histoire de l'Informatique</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="header">
      <div class="header_nav">
        <div class="logo">
          <img src="logo.png">
          <h1> HISTOIRE DE L'INFORMATIQUE </h1>
        </div>
        <div class="nav">
          <nav>
            <ul>
             <li><a href="" class="nav-option">Données</a></li>
             <li><a href="" class="nav-option">Algorithmes</a></li>
             <li><a href="" class="nav-option">Langages</a></li>
             <li><a href="" class="nav-option">Machines</a></li>
            </ul>
         </nav>
        </div>
      </div>
    </div>
    <div class= "content">
      <section class="section1">
        <h1>Données</h1>
       <article>
        </article>
      </section>
      <section class="section2">
       <h1>Algorithmes</h1>
       <article>
       </article>
      </section>
    </div>
    <script src="script.js"></script>
  </body>
</html>

推荐阅读