Блог

Главная - Вопросы по программированию - Левое заполнение контейнера, когда содержимое статьи проходит через сгиб

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

#html #css #fold

#HTML #css — код #сложите

Вопрос:

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

HTML

 <div id="container">

<header>
    Blog
</header>

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="newpost.html">New post</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

<aside>
    <form id="newsletter">
        <h2 label for="newsemail">Newsletter signup</h2 label>
        <input type="email" name="newsemail" placeholder="Enter email..." required>
        <button type="submit" class=submitbutton>Submit</button>
    </form>
</aside>

<article>
    <section><h1>Post 1</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 2</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 3</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
</article>

CSS — код

верхний, нижний колонтитул, навигация, статья, в сторону{ отображение: блок; }

#container{ радиус границы: 20 пикселей; цвет фона: #97C02F; отступ: 10 пикселей 50 пикселей 30 пикселей 50 пикселей; поле: 0 пикселей авто; ширина: 880 пикселей; переполнение: авто; }

в сторону{ float:слева; ширина: 150 пикселей; отступ-справа: 15 пикселей; цвет: красный; верхнее поле: 15 пикселей; }

статья{ float:слева; ширина: 660 пикселей; поле слева: 20 пикселей; }

раздел{ семейство шрифтов: ‘Droid Sans’, без засечек; цвет: #FFFFFF; размер шрифта: 15 пикселей; вес шрифта: обычный; }

Я вставил не весь свой код, но думаю, что вставил необходимые фрагменты.

Комментарии:

1. Не смотрел на HTML и CSS, но разве ваша «проблема» не вызвана просто добавлением браузером полосы прокрутки справа, потому что страница больше экрана? Это уменьшает ширину страницы на ширину полосы прокрутки

2. Ух ты, я чувствую себя глупо. Попросил нескольких человек взглянуть на это, но никто не заметил очевидного. Спасибо. Есть ли способ обойти это, потому что мне не нравится, как страница перемещается вправо?

3. Я думаю, Бен прав насчет добавления вертикальной полосы прокрутки. Вы можете использовать html { overflow-y:scroll } для принудительного прокрутки, даже если содержимое не нужно прокручивать, чтобы этот переход не происходил.

4. Проблема margin: auto в том, что это центрирует его и, таким образом, заставляет вашу страницу переходить. id советует вам просто смириться с этим, поскольку альтернативой является выравнивание вашего содержимого слева, а не по центру, что намного более некрасиво

5. Я выбрал решение motoxer4533. Спасибо, что указали мне на очевидное, и спасибо за решение!

Ответ №1:

Вы можете использовать html { overflow-y:scroll } для принудительного прокрутки, даже если содержимое не нужно прокручивать, чтобы этот переход не происходил.

Ответ №2:

Синтаксис HTML, который можно использовать в вашем классе CSS для обработки любого превышения в вашем контейнере или div; и т.д.

Этот код дает вам доступ к полосе прокрутки, когда это необходимо.

 .of{overflow:auto}
Метки: ,