我试图弄清楚如何使用CSS有效地将两个元素放置在同一主div下，而不是为每个元素编写单独的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>
答案 0 :(得分：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>