css - <span> 或 <p> 为 2 个或更多标签显示一个正文文本

Question

因此，我将一段文本分成 3 列(报纸条样式)。 那很好用。但是，在我的调整大小兼容性方面，我只想为小于特定尺寸的屏幕显示一列。

代码- HTML

<div class="columnContainer">
    <p>
        <span>Some text here that will display in the first column.
        </span>
        <span>Some text here that will display in the second column.
        </span>
        <span>Some text here that will display in the third column.
        </span>
    </p>
</div> 

CSS

 .columnContainer{
        position:relative;
    width:100%;
    max-width:750px;
    height:auto;
    min-height:145px;
    display:block;
    margin:0 auto;
    }

    .columnContainer span{
    position:relative;
    width:29%;
    height:auto;
    float:left;
    margin:0 2%;
    text-align:justify;
    }

然后是调整大小的 CSS

@media (max-width:630px){
    .columnContainer span{
        width:100%;
        display:inline;
    }

我希望文本显示为一个实心 block 。 喜欢:

Some body of text for first column. Some body of text for second column. Some body of text for third column.

但是-输出显示:

Some body of text for first column.
Some body of text for second column.
Some body of text for third column.

Answer 1

使用这个:

@media (max-width:630px){
    .columnContainer span{
        width:100%;
        display:inline-block;
    }

行内元素不能有width和height属性，需要设置display为inline-block或block。