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響應式段落標記

回答

相關問題