HTML CSS Responsives Absatz-Tag

Ich entwerfe eine Webseite und bin fast fertig, aber es gibt ein kleines Problem, das ich nicht zu lösen scheint.HTML CSS Responsives Absatz-Tag

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>

Wenn Sie den Code ausführen es zeigt den grünen Balken mit Text darin. Wenn Sie die Breite der Webseite ändern, verkleinert sich der grüne Balken mit der Webseite und bleibt in der richtigen Größe. Der Text ganz rechts macht das jedoch nicht. Sobald du so weit darüber gehst geht es außer Sicht und beginnt zu wickeln. Ich brauche den Text, um sich mit dem grünen Balken zu bewegen.

Ich bin auf diesem Teil stecken und kann nicht scheinen, es herauszufinden. Kannst du mir bitte helfen, was ich nicht mache?

Vielen Dank im Voraus

Quelle

2016-07-22 D. Brady

Wenn Sie die grünen Balken wollen die Breite des Browserfensters antworten, ich Ihre Breite auf .float-box-footer auf etwas setzen würde wie 100%. Ein Prozentwert wird mit dem Fenster angepasst.

Das Problem, dem Sie jetzt gegenüberstehen, ist, dass die Breite .float-box-footer durch die untergeordneten Elemente definiert wird. Der Füllwert auf .p5 erzwingt das Öffnen der grünen Box. Wenn Sie .float-box-footer einen Flüssigkeitsbreitenwert wie 100% geben und einen text-align: right; oder float: right; auf .p5 werfen, sollten Sie im Geschäft sein.

Ich würde vorschlagen, auf die Grundlagen des CSS-Box-Modell Lesen up: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Quelle

2016-07-22 16:57:17 cyoung

Das hat so viel geholfen. Vielen Dank, ich schätze die Antwort. Das andere Problem, das ich habe ist die Größe des linken Absatzes, sobald es einen bestimmten Punkt auf dem Bildschirm erreicht. Ich habe die Medienanfragen als die einzige Möglichkeit gesehen, dies zu tun, aber ich kann nie scheinen, dass das funktioniert. Haben Sie Vorschläge zur Größenänderung? –

Bitte den Code verweisen

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

Quelle

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>

ein Leerzeichen Eigenschaft mit einem nicht einwickeln Wert auf den floatboxfooter div hinzufügen. Überprüfen Sie die floatboxfooter Eigenschaften in meinem Beispiel. Hoffe das hilft.

Quelle

2016-07-22 18:47:04

Antwort

Verwandte Themen