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元素。

将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

<span>或<p>显示2个或更多标签的一个正文文本</p> </span>

3 个答案: