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 Отзывчивый абзац абзаца

ответ

Смежные вопросы