Question

我试图将3个盒子（完全相同的尺寸）放在一起。另外，我需要确保它们在屏幕上同样适合。

但在我的情况下，问题在于第三个框，它不会像其他两个一样停留在同一行，它只是跳下来并保持低于其他框。

我正在展示我到目前为止所做的工作，但我不确定它们是否巧妙编码。您有什么建议来改进我的代码吗？我是HTML和CSS的新手！

.HTML：

<!DOCTYPE html>

<html lang="eng">
    <head>
        <title> Put your title</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="index_akin_design.css">

    </head>

    <body>
        <h1><i>Logo</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header goes here</h1>
                <br /><br />


                <br/><br/><br/>


            <p id="p_box1">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>


            <p id="p_box2">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>   


            <p id="p_box3">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>   


    </body>



</html>

.CSS：

    *{

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

width:100%;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;

}

h1,body{

display:block;
}

h1{
text-align:center;
margin-top:55px;
color:green;
font-family:Accord SF;
border-bottom:2px solid Crimson ;
padding-bottom:10px;
}
#p_box1{
border:1px solid red;
margin-left:60px;
padding-left:30px;
padding-right:30px;
padding-top:70px;
padding-bottom:70px;
float:left;
}

#p_box2{

border:1px solid red;
margin-left:450px;
margin-right:550px;
padding-left:30px;
padding-right:30px;
padding-top:70px;
padding-bottom:70px;
float:middle;

}
#p_box3{
border:1px solid red;

margin-left:850px;

margin-right:61px;


padding-left:30px;
padding-right:30px;
padding-top:70px;
padding-bottom:70px;


}

Answer 1

使用%并清理代码

＆＃13;

*{box-sizing:border-box;padding:0; margin:0}

h1{
    text-align:center;
    margin-top:55px;
    color:green;
    font-family:Accord SF;
    border-bottom:2px solid Crimson ;
    padding-bottom:10px;
}
[id^=p_box]{
    padding: 18px 2%;
    border: 1px solid red;
    float: left;
    width: 29.333333%;
    margin: auto 2%;  
}
#p_box1{
    background-color:green;
}
#p_box2{
    background-color:red;
}
#p_box3{
    background-color:yellow;
}

＆＃13;

 <h1><i>Logo</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header goes here</h1>
                <br /><br />


                <br/><br/><br/>


            <p id="p_box1">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>


            <p id="p_box2">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>   


            <p id="p_box3">Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/>
                        Text goes here Text goes here Text goes here<br/></p>

＆＃13;

如何将3个盒子放在一起并且里面有一些文字？

1 个答案: