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>

Когда вы запускаете код, он показывает зеленую полосу с текстом в нем. При изменении ширины веб-страницы зеленая полоса уменьшается вместе с веб-страницей и остается нужного размера. Тем не менее, текст в правом углу не делает этого. Как только вы заходите так далеко, он выходит из поля зрения и начинает оборачиваться. Мне нужен текст, чтобы двигаться вместе с зеленой полосой.

Я застрял на этой части и не могу понять это. Можете ли вы помочь мне в том, что я не делаю?

заранее спасибо

Источник

3 ответа

Решение

Если вы хотите, чтобы зеленая полоса реагировала на ширину окна браузера, я бы установил вашу ширину на .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

Источник

Пожалуйста, отошлите код

* {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>
Источник 
<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>

Добавьте свойство пробела со значением без переноса в div floatboxfooter. Проверьте свойства floatboxfooter в моем примере. Надеюсь это поможет.

Источник
Другие вопросы по тегам