Поместите два элемента в одном div друг под другом

Я пытаюсь понять, как я могу эффективно расположить два элемента в одном и том же главном div друг под другом с помощью CSS (вместо того, чтобы писать отдельный CSS для каждого элемента). По сути, я пытаюсь сделать страницу результатов поиска, которую показывает Google.

Обновлено: я следовал предложениям в комментариях, но проблема заключается в том, что поплавок не оставлен, кажется, что первая «статья» находится справа от результатов поиска, а не выравнивается под ней.

.logo img {
margin: 15px;
float: left;
}

::-webkit-input-placeholder {
	color: gray;
}

.searchbar .search {
	height: 30px;
	width: 650px;
	border-radius: 15px;
	margin-top: 15px;
}

.searchbar .mic {
	position: absolute;
	left: 725px;
	margin-top: 20px;
}

.searchbar .tool {
	position: absolute;
	left: 760px;
	margin-top: 20px;
}

#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 30px;
}

#menu li {
	float:left;
	height: 30px;
	line-height: 30px;
}

#menu li a {
	display: block;
	padding: 0 20px;
	color: #696969;
	text-decoration: none;
}

.articles {
	margin-bottom: 20px;
}

.articles .article {
	list-style-type: none;
	padding: 5px;
	float: left;
}

.articles .article .heading a {
	text-decoration: none;
	font-size: 18px;
}

.articles .article .weblink a {
	color: green;
	text-decoration: none;
	font-size: 14px;
}

.articles .article .description  {
	color: #696969;
	font-size: 13px;
}

.footer {
	position: fixed;
	bottom: 0;
	margin-left: 150px;
	
}

.footer a {
	text-decoration: none;
	color: #696969;
	display: inline;
	
}

.footer .feedback,
.footer .privacy,
.footer .terms {
	padding-right: 20px;
	padding-left: 30px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset = "UTF-8">
    <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
    <title>Search Results</title>
</head>


<body>

    <div class='logo'>
        <a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
                alt='Google logo' height='35'></a>
    </div>

    <div class='searchbar'>
        <form>
            <input class='search' type='text' placeholder = "Sample Google search results page">
            <img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
                alt='Google microphone' height='25'>
            <img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
                height='25'>
        </form>
    </div>

    <ul id='menu'>
        <li><a href='www.google.com/#'>All</a></li>
        <li><a href='www.google.com/#'>News</a></li>
        <li><a href='www.google.com/#'>Videos</a></li>
        <li><a href='www.google.com/#'>Shopping</a></li>
        <li><a href='www.google.com/#'>Maps</a></li>
        <li><a href='www.google.com/#'>More</a></li>
        <li><a href='www.google.com/#'>Settings</a></li>
        <li><a href='www.google.com/#'>Tools</a></li>
    </ul>

    <div class='results'>
        <p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
    </div>

    <div class='articles'>
        <ul class='article'>
            <li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
                </a></li>
            <li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
            <li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
                Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
        </ul>
        <ul class='article'>
            <li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
                </a></li>
            <li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
            <li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
                Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
        </ul>
    </div>

    <div class='logodown'>

    </div>

    <div class='footer'>
        <a class='help' href='www.google.com/#'>Help</a>
        <a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
        <a class='terms' href='www.google.com/#'>Terms</a>
    </div>
</body>

</html>

не позиционируйте их абсолютно и не плавайте (в этой ситуации я не вижу необходимости ни в том, ни в другом), и они естественным образом появятся друг под другом

— 11.07.2019 15:50

Мне нужно, чтобы они были выровнены по левому краю, как я могу этого добиться? Если я не поплаваю, мои «статьи» не будут выравниваться по левому краю, как должно.

— 11.07.2019 15:51

Удалите поля и отступы из ul и li. Или просто используйте теги div (или статьи), вы также неправильно используете теги ul. Я бы сказал, что если вы хотите продолжать использовать теги ul, то каждая статья должна быть li (не новая ул) - не каждая строка результата

— 11.07.2019 15:52

Хорошо с вашим редактированием - если вы не хотите, чтобы что-то было справа от результатов - зачем плавать результаты - вам нужно перестать злоупотреблять плавающими и научиться правильно их использовать или очищать их (хотя с css3 вы не должны вообще надо ими пользоваться)

— 11.07.2019 15:55

Все результаты выравниваются, но первые результаты оказываются справа от страницы, хотя я больше не перемещаю их. Я думаю, что сделал правку, чтобы исправить это, но мне любопытно - без плавающих (например, логотип google и панель поиска, как бы я еще выровнял их в одну строку)?

— 11.07.2019 15:57

html css

11.07.2019 15:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нет необходимости использовать класс для каждой статьи, просто используйте класс article.

Кроме того, float и position были проблемными свойствами.

.logo img {
margin: 15px;
float: left;
}

::-webkit-input-placeholder {
	color: gray;
}

.searchbar .search {
	height: 30px;
	width: 650px;
	border-radius: 15px;
	margin-top: 15px;
}

.searchbar .mic {
	position: absolute;
	left: 725px;
	margin-top: 20px;
}

.searchbar .tool {
	position: absolute;
	left: 760px;
	margin-top: 20px;
}

#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 30px;
}

#menu li {
	float:left;
	height: 30px;
	line-height: 30px;
}

#menu li a {
	display: block;
	padding: 0 20px;
	color: #696969;
	text-decoration: none;
}

.articles {
	margin-bottom: 20px;
}

.articles .article {
	list-style-type: none;
	padding: 5px;
	float: left;
}

.articles .article .heading a {
	text-decoration: none;
	font-size: 18px;
}

.articles .article .weblink a {
	color: green;
	text-decoration: none;
	font-size: 14px;
}

.articles .article .description  {
	color: #696969;
	font-size: 13px;
}

.footer {
	position: fixed;
	bottom: 0;
	margin-left: 150px;
	
}

.footer a {
	text-decoration: none;
	color: #696969;
	display: inline;
	
}

.footer .feedback,
.footer .privacy,
.footer .terms {
	padding-right: 20px;
	padding-left: 30px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset = "UTF-8">
    <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
    <title>Search Results</title>
</head>


<body>

    <div class='logo'>
        <a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
                alt='Google logo' height='35'></a>
    </div>

    <div class='searchbar'>
        <form>
            <input class='search' type='text' placeholder = "Sample Google search results page">
            <img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
                alt='Google microphone' height='25'>
            <img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
                height='25'>
        </form>
    </div>

    <ul id='menu'>
        <li><a href='www.google.com/#'>All</a></li>
        <li><a href='www.google.com/#'>News</a></li>
        <li><a href='www.google.com/#'>Videos</a></li>
        <li><a href='www.google.com/#'>Shopping</a></li>
        <li><a href='www.google.com/#'>Maps</a></li>
        <li><a href='www.google.com/#'>More</a></li>
        <li><a href='www.google.com/#'>Settings</a></li>
        <li><a href='www.google.com/#'>Tools</a></li>
    </ul>

    <div class='results'>
        <p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
    </div>

    <div class='articles'>
        <ul class='article'>
            <li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
                </a></li>
            <li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
            <li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
                Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
        </ul>
        <ul class='article'>
            <li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
                </a></li>
            <li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
            <li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
                Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
        </ul>
    </div>

    <div class='logodown'>

    </div>

    <div class='footer'>
        <a class='help' href='www.google.com/#'>Help</a>
        <a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
        <a class='terms' href='www.google.com/#'>Terms</a>
    </div>
</body>

</html>

Редактировать: Добавил небольшое дополнение и оно явно не рядом с первой статьей.

Редактировать 2: Вам нужно удалить float во встроенном стиле, примененном к абзацу result:

<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>

Должен стать:

<p style='color: #696969;'> About 127,000,000 results (0.64 seconds) </p>

Когда я это делаю, происходит то, что первая статья находится справа от панели поиска, а не отформатирована под панелью поиска в вертикальном списке.

— 11.07.2019 15:55

Отредактировал мой пост, но без свойств float и position ваши статьи будут следовать вертикальному потоку элементов block.

— 11.07.2019 15:58

По какой-то причине SO не показывает то, что отображается в моей среде IDE, когда я запускаю HTML (imgur.com/a/UVM7FBa)

— 11.07.2019 16:00

Отредактировал мой ответ с помощью вашего html, но не хватает CSS. Не могли бы вы отредактировать свой вопрос со всеми необходимыми источниками?

— 11.07.2019 16:17

Да, мой плохой. Я добавил CSS, так что это выглядит так, как я вижу.

— 11.07.2019 16:21

Отредактировал мой ответ еще раз :)

— 11.07.2019 16:36

11.07.2019 15:51

Другие вопросы по теме

Использование системы начальной загрузки для размещения изображения рядом с div в ответ

Как манипулировать классами типа (class1+class2)

Как установить подчеркивание оформления текста при наведении на каждое слово текстовой области

Стиль класса только внутри таблицы

Использование javascript для идентификатора для ссылки на другую страницу без события onclick

Почему «text-align-last» не работает в Safari и ведет себя странно?

Почему у меня две рамки вокруг моего контента?

Chrome — положение исправлено

Несколько кнопок с одной функцией, но разными функциями

Получить значение динамических входов из одного строкового ввода с помощью jQuery

Поместите два элемента в одном div друг под другом

Ответы 1

Другие вопросы по теме

Похожие вопросы