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>

あなたがコードを実行すると、それはそれでテキストを緑色のバーが表示されます。 Webページの幅を適切に変更すると、緑色のバーはWebページと共に縮小され、適切なサイズのままです。しかし、右端のテキストはそれをしません。あなたが遠くに行くと、視界から外れてラッピングを開始します。緑色のバーと一緒に動くテキストが必要です。

私はこの部分に固執しており、理解できないようです。あなたは誰も私がやっていないことについて私を助けてもらえますか？

は、事前にありがとう

出典

2016-07-22 D. Brady

コードを参照して行ってください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

そんなに助けてくれました。非常に感謝していただきありがとうございます。もう1つの問題は、スクリーン上の特定のポイントに達すると、左の段落のサイズを変更することです。私はそれを行うための唯一の方法としてメディアのクエリを見てきましたが、私は決してそのように働くように見えることはありません。サイズ変更の問題についてご意見はありますか？ –

あなたは緑色のバーがブラウザウィンドウの幅に対応したい場合は、私のようなものに.float-box-footerであなたの幅を設定します

* {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のdiv要素にノーラップ値を空白プロパティを追加します。私の例では、floatboxfooterのプロパティをチェックします。お役に立てれば。

出典

2016-07-22 18:47:04

HTML CSS応答性の高い段落タグ

答えて

関連する問題