только маленький HTML/CSS вопрос:Сайт прыгает горизонтально
This Website прыгает по горизонтали при переходе к "Leistungen". Я изолировать проблему: Это происходит только, когда есть содержание в
<div id="box1"> and <div id="box2">Но я использую только <h3>, <ul> и <li> поэтому я не могу найти ошибки.
Заранее спасибо
Похоже, вы просто хотите убедиться, что полоса прокрутки всегда видна (это единственный «прыжок», который я вижу). Чтобы исправить это, вы можете добавить следующие строки в CSS:
html {
overflow-y: scroll;
}
Это гарантирует, что полоса прокрутки всегда есть, так что не должно быть скачок.
Ваша страница перемещается только при переходе от «Arzte» до «Leistungen» и то, потому что его добавление скроллбар, потому что есть много контента на «Leistungen» и не так много на «Artze». Это то, что вы имели ввиду?
Зачем это делать? –
Возможно, кто-то думает, что это лучше в комментарии, чем в ответе. Но я не знаю. Downvoter, покажите свое лицо! –
Это был не я, я активист –
Этот ответ не соответствует теме, поскольку вопрос о том, что полоса прокрутки не обертывается, как выясняется. Я оставлю здесь ответ, так как он может решить эту проблему в качестве альтернативы полосе прокрутки.
Насколько я могу судить, проблема в том, что в css нет ничего, чтобы сделать ваши объекты «box1», «box2» и т. Д., Поэтому, когда вы увеличиваете масштаб изображения, так что изображение самого правого изображения выходит за рамки край экрана. Вы можете устранить проблему, добавив дисплей: встроенный блок; свойство css.
Это немного CSS в отношении этих объектов в main.css:
#mycontainer p
{
font-size: 0.75em;
text-align: left;
line-height: 1.5em;
}
#box1
{
margin-right: 1em; margin-bottom: 5em;
}
#box2
{
margin-right: 1em; margin-bottom: 5em;
}
#box3
{
margin-right: 1em; margin-bottom: 5em;
}
#box4
{
margin-right: 1em; margin-bottom: 5em;
}
Там нет ничего здесь, чтобы сделать коробки завернуть. Вы можете достичь желаемого эффекта с помощью дисплея: встроенный блок с чем-то вроде этого:
<!DOCTYPE html>
<html>
<head>
<style>
.img_box
{
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
display: inline-block;
}
</style>
</head>
<body>
<h2>Boxes</h2>
<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>
</body>
</html>
Вот скрипка, так что вы можете увидеть, как это работает: https://fiddle.jshell.net/m67zftfk/
В принципе, просто дайте # box1, # коробка2, # коробка3, # коробка4 a display: inline-block; и width: some_width; height: some_height; margin: some_margin; в css.
встроенный блок делает элемент встроенным, но также позволяет устанавливать высоту и ширину, что позволяет обертывать: когда элементы выходят за пределы экрана, браузер обертывает их. Однако вам нужно предоставить параметры размера для работы.
Ну, это был не мой вопрос, но было бы очень приятно сделать эту работу тоже (для мобильных телефонов и т. Д.). Поэтому я добавил «display: inline-block»; к моему # Box1, но он не работает. – Empr
Извините за непонимание. Я оставлю здесь ответ, если есть кто-то, кому нужна упаковка, а не полоса прокрутки. –
Я немного расширил ответ. Попробуйте поместить ширину и высоту в ящики в явном виде, и они должны быть обернуты. К сожалению, мне трудно выполнить правильный тест, не воспроизводя всю вашу настройку. –
Подскакивает горизонтально? Похоже, ваш сайт слишком длинный, что создает полосу прокрутки? – putvande
на этой странице с той же проблемой "ZON Nürnberg" создать прокрутку –
Или использовать: html { overflow: -moz-scrollbars-vertical; overflow-y: прокрутка; } –