Question

我想要实现的是，第一个div将一直到屏幕的右端，这是好的，但是当我尝试make 3 div时，彼此并排共享同一行，所以我尝试用浮子设置它们中的3个并使它们的宽度为33％。发生的事情是只有2个div将共享同一行，而第3个div则低于这2个div。它们只在我设置宽度并浮动到每个div时对齐，我尝试一次应用浮点数和宽度3但它不起作用，我搞砸了某个地方而且我对div的行为感到困惑。

这是我的HTML：

<!DOCTYPE html>
    <html>
    <head>
        <title>
        practice webpage
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="container">
            <div class="banner">
            contents
            </div>
            <div class="menu1">i am menu 1</div>
            <div class="menu2">i am menu 2</div>
            <div class="menu3">i am menu 3</div>
        </div>
    </body>
</html>

CSS：

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

.banner{
background-color: aqua;
}

.menu1, menu2, menu3 {
float: left;
width: 33%;
}

.menu1{
background-color: crimson;
}

.menu2{
background-color: blueviolet;
}

.menu3{
background-color: darkorange;
}

Answer 1

编写css时必须在课程中添加点。

此处更新您的代码：

.menu1,
.menu2,
.menu3 {
  float: left;
  width: 33%;
}

检查更新的小提琴：https://jsfiddle.net/nashcheez/0qg1hhcj/

我想这就是你想要的：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.banner {
  background-color: aqua;
}
.menu1,
.menu2,
.menu3 {
  float: left;
  width: 33%;
}
.menu1 {
  background-color: crimson;
}
.menu2 {
  background-color: blueviolet;
}
.menu3 {
  background-color: darkorange;
}

<div class="container">
  <div class="banner">
    contents
  </div>
  <div class="menu1">i am menu 1</div>
  <div class="menu2">i am menu 2</div>
  <div class="menu3">i am menu 3</div>
</div>

Answer 2

这是因为在css中你写了.menu1, menu2, and menu3而不是.menu1, .menu2, .menu3。请参阅此example。

使用float和width的css div排列

2 个答案: