Question

我试图在另一个中添加多个盒子，但我没有得到我想要的请帮助！为什么我只获得线？我添加显示和溢出属性仍然是我得到的

 style.css

 @charset "utf-8";

 body {
     margin:0;
     padding:0;
     background:url(../images/back1.png);
     background-repeat:repeat;  
}

.logomainbox {
    width: 100%;
    height: 50px;
    margin: 10px;
    background: linear-gradient(#FC8E03, #FF9801);
}

.menubar {
    width: 100%;
    height: 50px;
    margin: 10px;
    background: linear-gradient(#DADADA,#C8C6C6);
}

.imageslide {
    width: 100%;
    height: 275px;
    margin: 10px;
    background: linear-gradient(#FC8E03, #FF9801);
}

.textdiscription {
    width: 60%;
    height: 400px;
    margin-left:20%;
    margin-right:20%;
    border:3px solid red;
}
.textare {
    width: 100%;
    height: 100px;
    border: 1px solid blue; 
}

.box {
    height: 250px;
    wedith: 30%;
    border: 1px solid green;
    display:inline-block;
    overflow:auto;  
}

 index.html
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel="stylesheet" href="css/style.css">
 <title>Home</title>
 </head>


 <body>
  <div class="logomainbox">

 </div>
 <div class="menubar">

  </div>
  <div class="imageslide">

     </div>
  <div class="textdiscription">
  <div class="textare">
  </div>
  <center>
  <div class="box">
  </div>
 <div class="box">
 </div>
 <div class="box">
 </div>
 </center>
 </div>


 </body>
 </html>

what i want

what i am getting

Answer 1

问题是你有wedith而不是width。将您的代码更改为：

.box {
    height:250px;
    width:30%;
    border: 1px solid green;
    display:inline-block;
    overflow:auto;  
}

Answer 2

您有拼写问题，

.box
wedith:30%

如何在一个盒子里面添加多个盒子

2 个答案: