Боковая панель не плавает вправо

Я искал. Я пробовал. Пока ничего не работает. Я новичок, но перед этим я без проблем разошёл. Это что-то связано с липким нижним колонтитулом flexbox? Раньше я этого не делал. Я не вижу связи, но кто знает. Все, что мне нужно - это основной раздел и боковая панель. Я не могу так тяжело. Заранее спасибо. Вот мой код: HTML:Боковая панель не плавает вправо

<section>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</section> 

<aside class="sidebar">Content for class "sidebar" Goes Here</aside> 

<footer> 
    <div class="footer-wrapper">Content for class "footer" Goes Here</div> 
</footer> 

</div></body> 
</html> 


section { 
    display: block; 
    width: 65%; 
    float: left; 
    background-color:#999999; 
    padding: 20px; 
    font-size: 1.5em; 
    flex: 1 0 auto; 
} 
.sidebar{ 
    display: block; 
    background-color: #F9E903; 
    width: 25%; 
    height: auto; 
    padding: 0px; 
    float: right; 

} 
footer { 
    clear: both; 
    background-color: black; 
    font-size: 1.1em; 
    color: white; 
    padding: 15px 
}

источник

2016-07-08 Newsong80

Пожалуйста, скрипку. – jmargolisvt

Вот мой весь код. Надеюсь, я сделал это правильно. Я все еще не могу заставить боковую панель плавать вправо. https://jsfiddle.net/newsong80/d5yevka0/#&togetherjs=jyu9v6y9Px – Newsong80

Я вернулся и изолировал свой «раздел, боковую панель и нижний колонтитул» на новой странице. Боковая панель, наконец, поплыла вправо (но не вверх по основному разделу). Когда я добавлю обратно в свою оболочку div, боковая панель вообще не будет плавать. Затем я вынул гибкие строки кода из обертки div, а боковая панель направилась вправо (опять же, а не рядом с основным разделом). Так что это должен быть гибкий вариант. Есть предположения? Мне очень нравится отзывчивый липкий нижний колонтитул. – Newsong80

Он работает до тех пор, мобильный телефон для меня, в этот момент вопрос в том, что ваш 20px отступов на элементе раздела являются баловаться с процентами. Вы можете сделать это, чтобы исправить это, я также добавил 10% к разделу, так что не 10% дополнительного пространства между ними, но вы можете уменьшить его обратно до 65%, если, который предназначен:

section{ 
    width: calc(75% - 40px); 
    padding: 40px; 
}

Всякий раз, когда вы» повторно используя процентную ширину для чего-то и иметь значение пикселя для поля или заполнения, убедитесь, что вы используете вычисление для вычитания совокупного значения пикселя из ширины, иначе это вызовет проблемы с масштабированием.

источник

2016-07-08 17:00:29 will

Это сверхкомпенсация того, что размер коробки: border-box делает естественно (и еще более конкретный html). –

body { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 

 
p { 
 
    padding: 1em; 
 
    } 
 

 
section { 
 
    width: 75%; 
 
    float: left; 
 
    background-color:#999999; 
 
    padding: 0; 
 
    font-size: 1.5em; 
 
} 
 
aside { 
 
    background-color: #F9E903; 
 
    width: 25%; 
 
    padding: 0px; 
 
    float: right; 
 
} 
 
footer { 
 
    clear: both; 
 
    background-color: black; 
 
    font-size: 1.1em; 
 
    color: white; 
 
    padding: 15px 
 
}

<html> 
 
    <body> 
 
<section> 
 
    <p>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</p></section> 
 

 
<aside class="sidebar"><p>Content for class "sidebar" Goes Here</p></aside> 
 

 
<footer> 
 
    <div class="footer-wrapper"><p>Content for class "footer" Goes Here</p></div> 
 
</footer> 
 

 
</body> 
 
</html>

Привет вам нужно 1. коробчатой проклейки: пограничный ящик и 2. Вам не нужно для отображения: блок, то html5 элементы уже блоковые элементы. Я также применяю отступы к параграфам внутри раздела и в сторону, если вы добавляете к ним прокладку, это мешает ширине макета, и они не работают.

источник

2016-07-08 17:04:14

добавить глобальный коробчатого проклейки, как показано ниже

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box: -ms-box-sizing: border-box: box-sizing: border-box; }

выше фактор в вашем отступа, края и границы добавлены к любому из вашего блока и инлайн-блочного элемента (как padding: 20px, что вы добавили в раздел).

затем удалить display: block; со стороны и секции (они уже блокируют элемент)

источник

2016-07-08 19:36:04 Omeiza

Боковая панель не плавает вправо

ответ

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