Question

我希望我的页脚包含2个部分的文本：第一个短文本应该根据我的主要居中，第二个文本（当前日期）应该与main的右侧对齐。两个文本都应该在一行中。我还想在较小的屏幕上更改日期的位置。因此，这两个文本都集中在智能手机和平板电脑上的两个不同的行。（我使用基础框架。）我得到的就是：

HTML：

<footer class="centered"> 
    <span class="block">
        Text 1
    </span>
    <span id="date" class="block rightside">
        <script>
            n = new Date();
            y = n.getFullYear();
            m = n.getMonth() + 1;
            d = n.getDate();
            document.getElementById("date").innerHTML = d + "." + m + "." + y;
        </script>
    </span>
</footer>

CSS：

.block {
    display: inline-block;
}
.centered {
    text-align:center;
}
.rightside {
    float: right;
}

问题是，浮动在我的情况下没有响应。在某个屏幕尺寸上，正确的文字会转到下一行，但不在我的主屏幕之内。我对html和css很新，那么有更好的方法来安排这些元素吗？

Answer 1

您可以使用CSS media query来完成此任务。

您要做的是指定您想要更改CSS规则的宽度，然后您将设置这些规则。以下是我认为对你有用的标记：

@media all and (max-width: 800px) {
    .block {
        display: block;
        float: none;
    }
}

基本上，我们正在重置样式，以便将内容放在两行中心。

首先，我们将显示样式从inline-block重置为block，以便它们显示在两行上。然后，我们删除日期上的浮动以使其正常运行。您text-align上已拥有的footer财产将为我们提供中心服务。

您可以将800px值调整为您喜欢的任何值，并且您不必使用像素。您可以使用ems或其他任何内容。

修改为了真正居中中间跨度并且没有被日期推倒，一个选项是使用不同的方法将日期移动到右边，这将是绝对定位它。这将使其脱离文档的正常流程，因此它不会推动另一个跨度。然后，在您的媒体查询中，您可以将其移回标准定位。

例如：

.block.rightside { position: absolute; right: 10px; /* or whatever */ bottom: 10px; /* or whatever */ } @media all and (max-width: 800px) { .block.rightside { position: static; } }

您也可以调整居中跨度的位置，可能是相对位置或负右边距。

Answer 2

我看了你的问题，我认为有一些事情正在发生。首先让我们解决这个问题。

您正在深入研究响应式网页设计，因此您需要了解媒体查询及其使用内容。媒体查询是您如何定位特定屏幕尺寸范围。这里需要媒体查询。

把事情带入一个更有针对性的观点，我会说你实际上并不需要漂浮你的＆＃34;右边＆＃34; class div right。一般来说，如果最终结果看起来有点像你将文本的两个区域放入列中，那么你实际上想要向左浮动。我发现在这些情况下，漂浮的东西在初始答案中看起来很好或正确，或者作为快速解决方案，但是一旦你深入了解事情，总会出现一些问题。

正如所介绍的所有内容所说，让我现在尝试为您的问题提供一个可能的解决方案，并理解在代码中通常有多种方法可以完成某些任务。这是我的方式......

基本思路：我会创建一个div，里面有3个div（基本上是3列），它们被格式化成一行。我会将左边的div留空，中间的div会有文本，而右边的div会有文本。我会使用媒体查询根据特定屏幕尺寸的需要重新定位div。所以......

步骤1）我会在页脚div中创建一个容器div。然后我会在其中创建3个div，具有相同的尺寸。请参阅下面的代码。哦，并确保将此代码放入＆＃34; head＆＃34;你的HTML部分......

<meta name="viewport" content="width=device-width, initial-scale=1">

好的，现在我会使用页脚代码......

<强> HTML

<footer class="centered"> 
    <div class="container">
        <div id="col1">
        </div>
        <div id="col2">
            <span class="block">
                Text 1
            </span>
        </div>
        <div id="col3">
            <span id="date" class="block rightside">
                <script>
                    n = new Date();
                    y = n.getFullYear();
                    m = n.getMonth() + 1;
                    d = n.getDate();
                    document.getElementById("date").innerHTML = d + "." + m + 
                    "." + y;
                </script>
            </span>
        </div>
    </div>
</footer>

关于样式，有两件事需要考虑。计算机屏幕上的内容如何以及移动设备上的外观如何。注意我是如何使用＆＃34;容器的伪类的：＆＃34;使列的行为符合要求。如果你想看看如果你没有包含它会发生什么，只需对那部分进行评论，你就会注意到为什么那部分如此重要。另请注意媒体查询部分中的设置更改及其影响...

CSS （请注意，我为所有div添加了背景颜色。这样您就可以在更改屏幕大小时看到正在发生的事情。您可以摆脱它颜色，并根据需要对齐div内的文本。）

html, body {
    width: 100%;
    height: 100%;
    background-color: blue;
}

footer {
    width: 100%;
    height: 200px;
    background-color: black;
    position: absolute;
    bottom: 0;
}

.container {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

.container:after {
    content: "";
    display: block;
    clear: both;
} 

#col1, #col2, #col3 {
    width: 33%;
    height: 50px;
    background-color: orange;
    margin: 2px;
    float: left;
}

/* ========== MEDIA QUERIES ========== */

@media screen and (max-width: 1997px) {
    #col1 {
        display: none;
    }

    #col2, #col3 {
        width: 100%;
    }
}

你有它。这就是我个人将完成我认为你想做的事情。同样，我没有对齐文本......要纠正的主要问题是你如何定位你的div。

我希望有所帮助，请记住我所说的......这就是我将如何做到的。我确信有不同甚至更好的方式。

祝你好运！：）

在页脚中定位文本

2 个答案: