HTML CSS 响应式段落标签

Question

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

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;}

        .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>

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

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

提前致谢

Answer 1

请参考代码

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

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

.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>

Answer 2

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

调整

您现在面临的问题是 .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

Answer 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;
        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 属性。希望这有帮助。

HTML CSS 响应式段落标签

HTML CSS Responsive paragraph tag

html

css

tags

paragraph

responsive