Question

我正在处理一个页面，我必须将描述框（此处名为block2）分成四组，并在每一行显示其中的两个。我将display:inline;标记添加到block2，但仍然每个块都显示在新行上。如果有人能帮助我，我将非常感激。谢谢这是我的代码，

.block2{
    width:auto;
    float:left;
    display:inline;
    background-color:#ECECEC;
    padding:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363
}
.block2 p{
    width:462px; 
    height:400px;  <!-- Height of the box containing details(one for all) -->
    float:left;
    padding:19px 0 13px 16px;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

以下是HTML，

        <div class="block2">

                Provide here the details about first member 

        </div>

    <div class="block2">

            Member 2's details
        </div>

<div class="block2">



            Member 3's details

    </div>

<div class="block2">

            Member 4's details

    </div>

Answer 1

如果您正在寻找规则display: inline-block。它就是。但是我应该警告你，它可能是一个非常敏感的规则，受到HTML中空格的影响。

但是，如果您只是想阻止重叠，请尝试从display:inline; CSS规则中删除.block2。

Answer 2

您可以将其用于width，而不是<p>用于<div>代码。我已将<div>的{{1}}设置为width，因为您使用了300px和padding（宽度超出了容器宽度），您可以将margin设置为width，然后会自动在一行中显示两个50%。

.block2{
    width:300px;
    float:left;
    display:inline;
    background-color:#ECECEC;
    padding:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363;
    border:1px solid red;
}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

我希望这样做，我希望这可以帮助您。

.block2{
    width:50%;
    float:left;
    display:inline;
    background-color:#ECECEC;
    color:#636363;

}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;

}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

<div>

Answer 3

这似乎是一个简单的填充问题，宽度导致它溢出。很高兴我帮忙了！

如何显示块内联？

3 个答案: