Question

当我试图将2个div放在一起时，我遇到了一个问题。

display: inline它会删除我的边框，并且不会将两个div放在同一行上。

请告知：

.gig {
    outline: 1px solid green;
    width: 400px;
    height: 200px;
    display: inline;
}

<div class="gig">
    <h3>The band</h3>
    <p><em>We love to play</em></p>
    <p>Great gigs we have met good people!</p>
</div>
<div class="gig">
    <h1>great shit</h1>
    <p>fdfdsfsd</p>
</div>

Answer 1

Inline个对象没有高度或宽度属性，因此请改用display: inline-block。

Answer 2

你可以使用：

float: left;

而不是

display: inline;

Answer 3

与块元素相比，内嵌元素不具备宽度，高度，边距等属性。

<强>解决方案：

使用display: flex

支持跨浏览器支持：

使用display: inline-block

Answer 4

尝试以下更改之一：

使用float：

float: left;

或

float: right;

或使用内联显示：

display: inline-block

或使用flex display：

display: flex

显示：内联不工作边框

4 个答案: