这是我的代码，我无法让#eateries div与#categories div相邻。我删除了网页只包含相关的部分。我只有几个月的时间学习HTML。
编辑： 我尝试实施已经建议的内容但是在完整的网站上它不起作用是否有不同的东西需要做？
@charset "UTF-8";
#contacts {
background-color: #424040;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
p {} #content {
border: medium solid #FE4B3B;
background-color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#navigation {
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
background-color: #424040;
height: 60px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
#header #navigation ul li {
list-style: none;
display: inline;
}
#header {
background-image: url(Assets/boston.jpeg);
background-repeat: no-repeat;
height: auto;
}
#options {} #contact_info {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#header_image {
background-repeat: no-repeat;
height: 250px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
.Nav_button a {
background-color: #424040;
margin-right: 50px;
padding-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
color: #FFFFFF;
text-decoration: none;
font-size: large;
}
#Title_image {
text-align: center;
width: 100%;
height: 100%;
}
.Nav_button a:hover {
color: #FFFFFF;
background-color: #000000;
}
body {
margin: 0 auto 0 auto;
width: 1300px;
background-image: url(Assets/Boston_Back_Bay_reflection.jpg);
}
#garden_img {
width: 400px;
height: auto;
}
#header_text {
font-size: xx-large;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #0C0D12;
text-align: center;
}
.text_content {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
}
#hall_img {
width: 200px;
height: auto;
text-align: center;
}
.picture_div {
width: auto;
margin: auto;
height: auto;
text-align: center;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 1294px;
border: 0px;
margin: 0 auto 0 auto;
}
#const:hover {
background-color: #FE4B3B;
}
#mfa:hover {
background-color: #FE4B3B;
}
#nathist:hover {
background-color: #FE4B3B;
}
#mos:hover {
background-color: #FE4B3B;
}
#categories {
border: medium solid #000000;
width: 200px;
}
#placestoeat {} #eateries {
border: medium solid #000000;
width: 400px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="header_image">
<img src="Assets/Boston_Header.png" alt="" width="1291" height="455" id="Title_image" />
</div>
<div id="navigation">
<ul width="1291" height="455">
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 253) {
$('#navigation').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 253) {
$('#navigation').removeClass('navbar-fixed');
}
});
});
</script>
<li class="Nav_button"><a href="index.html">Home</a>
</li>
<li class="Nav_button"><a href="History.html">History</a>
</li>
<li class="Nav_button"><a href="restraunts.html">Restraunts</a>
</li>
<li class="Nav_button"><a href="outdoor.html">Outdoors</a>
</li>
<li class="Nav_button"><a href="Maps.html">Maps</a>
</li>
</ul>
</div>
</div>
<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused
restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to
eat!
</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
对display: inline-block和#categories div使用#eateries。
#categories {
border: medium solid #000000;
width: 200px;
display: inline-block;
}
#placestoeat {
display: block;
}
#eateries {
display: inline-block;
border: medium solid #000000;
width: 400px;
}<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to eat!</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
答案 1 :(得分：0)
#categories {
border: medium solid #000000;
width: 200px;
display : inline-block;
}
#placestoeat {
display: block;
}
#eateries {
border: medium solid #000000;
width: 400px;
display : inline-block;
}<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to eat!</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
答案 2 :(得分：0)
#categories {
border: medium solid #000000;
width: 25%;
float: left;
}
#eateries {
border: medium solid #000000;
width: 70%;
float: left;
}
#contacts {
display: inline-block;
}
<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to eat!</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
快速而肮脏的解决方案，应该适用于这种简单的情况......
答案 3 :(得分：0)
在float: left
display: inline-block或#placestoeat > div
如果在以下示例中使用了display: inline-block：
#categories {
border: medium solid #000000;
width: 200px;
}
#placestoeat {
display: block;
}
#placestoeat > div {
display: inline-block;
}
#eateries {
border: medium solid #000000;
width: 300px;
float:left;
}<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused
restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to
eat!</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
答案 4 :(得分：0)
@Eric Londern，只需编写css规则#placestoeat div { display: inline-block}