css - 或者为 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;
    }

我希望文本将显示为一个实心块。喜欢：

第一列的一些正文。第二列的一些正文。第三列的一些正文。

但是 - 输出显示：

第一列的一些正文。
第二列的一些正文。
第三列的一些正文。

Answer 1

width对inline元素设置 a 是不可能的。

添加display: block;到您的span元素中，它将自动变为全角。你甚至不需要width: 100%;，当然你需要防止它float: none;像这样浮动：

@media (max-width:630px){
    .columnContainer span{
        display: block;
        float: none;
    }
}

Answer 2

用这个：

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

内联元素不能有宽度和高度属性，因此您需要将显示设置为内联块或块。

Answer 3

媒体查询中的声明是对其他声明的补充。因此，您必须float: left使用float: none

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

见JSFiddle