Question

我有3个div容器。为什么3个div容器不在一排？如果我在每个容器中填入相同的内容，它们就是连续的。如果我填写每个框内的不同内容，它看起来像这样...... 这是myPage +代码：

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
    text-align: center; 
}


.divbox{
    display: inline-block;
    height: 300px;
    width: 250px;
    border: 4px solid black;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: brown;
}

.divbox:hover{
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

＆＃13;

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <section>
            <article>
                <div class="divbox">
                    <img src="http://malsup.github.com/images/beach1.jpg" width="250" height="250" />
                    <a href="#">Link1</a>
                </div>
                <div class="divbox">
                </div>
                <div class="divbox">
                    content
                </div>
            </article>
        </section>
    </body>
</html>

＆＃13;

Answer 1

vertical-align（适用于内联级和table-cell元素）的默认值为baseline（前一个元素的基线）。您需要将vertical-align: top添加到.divbox。

.divbox {
    display: inline-block;
    height: 300px;
    width: 250px;
    border: 4px solid #000;
    margin: 200px 50px;
    transition: all 0.5s ease 0s;
    background-color: #A52A2A;
    vertical-align: top;
}

Answer 2

只需添加float：left;到你的代码

将您的divbox编辑为此

.divbox{
display: inline-block;
height: 300px;
width: 250px;
border: 4px solid black;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: brown;
float:left;
}

3个div容器不垂直对齐

2 个答案: