HTML CSS 响应式段落标签答案

【问题标题】：HTML CSS Responsive paragraph tagHTML CSS 响应式段落标签
【发布时间】：2016-07-22 16:40:22
【问题描述】：

我正在设计一个网页，我几乎完成了，但有一个小问题我似乎无法弄清楚。

HTML：

<html>

<head>

    <style>
        * {margin:0; padding:0; text-indent:0; }

        .float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}

        .p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;}

        .p5{font-size: 7pt; color: black; padding-left:465pt;}

    </style>
</head>

<body>

<div class='float-box-footer'>
    <p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
    </p>

    <p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>

</body>

</html>

当您运行代码时，它会显示带有文本的绿色条。当您调整网页宽度时，绿色条会随着网页一起缩小并保持适当的大小。但是，最右边的文本并没有这样做。一旦你走得太远，它就会消失并开始包裹。我需要文本与绿色条一起移动。

我被困在这部分，似乎无法弄清楚。你们谁能帮我解决我不做的事情吗？

提前谢谢你

【问题讨论】：

标签： html css tags paragraph responsive

【解决方案1】：

如果您希望绿色条响应浏览器窗口的宽度，我会将.float-box-footer 上的宽度设置为 100%。百分比值将随窗口调整。

您现在面临的问题是.float-box-footer 的宽度是由其中的子元素定义的。 .p5 上的填充值强制打开绿色框。如果你给 .float-box-footer 一个像 100% 这样的流体宽度值，然后把 text-align: right; 或 float: right; 扔到 .p5 上，你应该做生意了。

我建议阅读 CSS 盒子模型的基础知识：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

【讨论】：

帮助很大。非常感谢您的回复。我遇到的另一个问题是在左侧段落到达屏幕上的某个点时调整其大小。我已经将媒体查询视为做到这一点的唯一方法，但我似乎永远无法做到这一点。您对调整大小问题有什么建议吗？

【解决方案2】：

请参考代码

* {margin:0; padding:0; text-indent:0; }

.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}

.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;}

.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;}


<div class='float-box-footer'>
    <p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
    </p>

    <p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>

【讨论】：

【解决方案3】：

<style>
    * {margin:0; padding:0; text-indent:0; }

    .float-box-footer{
        display:inline-block;
        position:relative;
        height:37px;
        background-color:#accb32;
        max-width: 860px;
        width: auto\9;
        white-space: nowrap;
        }

    .p4{
        font-size: 12pt; 
        color: black; 
        padding-left:5pt; 
        left:0; top:7pt; 
        font-family:National, Arial, sans-serif;
        position:relative;}

    .p5{
        font-size: 7pt; 
        color: black; 
        padding-left:465pt;         
        }

</style>

在 floatboxfooter div 中添加一个没有换行值的空白属性。检查我的示例中的 floatboxfooter 属性。希望这会有所帮助。

【讨论】：