HTML CSS响应式段落标记

我正在设计一个网页，我快完成了，但有一个小问题，我似乎无法弄清楚。HTML CSS响应式段落标记

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>

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

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

预先感谢您

来源

2016-07-22 D. Brady

如果你想在绿色栏浏览器窗口的宽度回应，我将在.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

来源

2016-07-22 16:57:17 cyoung

这非常有帮助。非常感谢你，我感谢你的回应。我遇到的另一个问题是在左侧的段落到达屏幕上的某个点时调整其大小。我已经将媒体查询看作是实现这一目标的唯一方法，但我似乎无法完成这项工作。您对调整大小问题有任何建议吗？ –

请做参考代码

* {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>

来源

2016-07-22 16:51:43 vignesh

<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股利。检查我的例子中的floatboxfooter属性。希望这可以帮助。

来源

2016-07-22 18:47:04

HTML CSS响应式段落标记

回答

相关问题