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

當您運行代碼時，它會顯示帶有文本的綠色條。 當您調整網頁寬度時，綠色條會隨網頁一起縮小並保持適當的大小。 然而，最右邊的文本並沒有這樣做。 一旦你走得太遠，它就會消失並開始包裝。 我需要文本與綠色條一起移動。

我被困在這部分，似乎無法弄清楚。 你能幫我解決我沒有做的事情嗎？

提前謝謝你

Answer 1

請參考代碼

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

Answer 2

如果您希望綠色條響應瀏覽器窗口的寬度，我會將.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

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\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 添加一個沒有 wrap 值的 whitespace 屬性。 檢查我的示例中的 floatboxfooter 屬性。 希望這會有所幫助。

HTML CSS 響應式段落標簽

問題描述

3 個解決方案

解決方案1
0 2016-07-22 16:51:43

解決方案2
0 已采納 2016-07-22 16:57:17

解決方案3
0 2016-07-22 18:47:04

HTML CSS 響應式段落標簽

問題描述

3 個解決方案

解決方案1 0 2016-07-22 16:51:43

解決方案2 0 已采納 2016-07-22 16:57:17

解決方案3 0 2016-07-22 18:47:04

解決方案1
0 2016-07-22 16:51:43

解決方案2
0 已采納 2016-07-22 16:57:17

解決方案3
0 2016-07-22 18:47:04