Блог

Главная - Вопросы по программированию - Как мне поместить мой элемент в стороне на стороне страницы?

Как мне поместить мой элемент в стороне на стороне страницы?

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать так, чтобы мой элемент в стороне находился на стороне моей страницы, рядом с <p> элементом (надеюсь, я понимаю смысл). Кто-нибудь знает, как я могу это исправить?

Вот фотография и мой код:

как выглядит моя страница

HTML:

 <aside>
<h4>Beginner Friendly Videos</h4>
    <ul class="aside">
      <li>
      <li>
      <li>
    </ul>       
</aside>

CSS:

 .aside {
    float: right;
    margin: 0, 1.5%;
    position: relative;
    color: black;
    width: 50%;
    display: block;
}

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

1. Не могли бы вы объяснить немного лучше или добавить ожидаемый результат? Может быть, опубликовать больше кода, чтобы увидеть, что может быть

Ответ №1:

Я бы рекомендовал взглянуть здесь https://css-tricks.com/snippets/css/a-guide-to-flexbox / в Flexbox. Это избавит вас от многих хлопот в будущем, поскольку он НАМНОГО лучше подходит для форматирования, чем Float.

При этом я бы рекомендовал что-то вроде приведенного ниже.

HTML

 <body>
    <div id="wrapper">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed pellentesque turpis. Proin blandit, augue in euismod facilisis, lacus arcu bibendum purus, ut interdum libero dui in sapien. Suspendisse convallis imperdiet urna sed consequat.</p>
        </div>
        <aside>
            <ul>
                <li>1
                <li>2
                <l1>3
            </ul>
        </aside>
    </div>
</body>

CSS

 #wrapper {
    display: flex;
    flex-direction: row;
}
aside {
   [Your Styles Here, No Float];
}

В результате aside находится справа справа от вашего тега p. Обратите внимание, что p находится внутри div, потому что это встроенный элемент. Вы не предоставили весь свой код, поэтому я не могу предоставить точный код для вас, однако, если вы отрегулируете ширину для вложенного div и aside и реализуете это, это должно сработать для вас!

Если вы хотите, чтобы элемент aside находился слева, просто поместите его перед вложенным div.

Метки: