初来乍到，我正在创建一个网站，似乎有一个问题，我做了一个表，以保存一个图像和一个表，我做了一个内容。左边的内容右边的图像。当我向右浮动图像表时，内容表将完全移动到图像表下面。当我浮动它离开有太多的空间之间的2。所讨论的代码是表和表3。我希望它在链接按钮旁边显示图像块，在按钮下面但在图像块旁边显示上下文块。
第二个问题是我的logo标题，这是一个图像正在删除背景图像。
HTML代码
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link href="Articlepage.CSS" rel="stylesheet" type="text/css">
<title>BEADLES BEADING</title>
</head>
<body id="wrap">
<h1><img src="logo.jpg" alt="logo"></h1>
<a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
<a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
<a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
<a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<table3>AD SPACE(Image)</table3>
<table>
<tr>
<td>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
<table2>
<tr>
<td>
FOOTER
</td>
<tr>
</table2>
</body>
</html>
CSS代码
div{
text-align:left;
position:relative;
font-size:2.5em;
font-weight:bold;
}
div1{
text-align:left;
position:relative;
font-size:1.5em;
text-shadow: 2px 2px black;
font-family:Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
h1{
text-align:left;
font-family:Arial,Helvetica,sans-serif;
text-shadow: 0.1em 0.1em 0.2em black;
font-size:2.0em;
font-style:italic;
float:inline;
border:3px solid black;
width:800px;
height:196px;
padding:0;
}
h2{
text-align:left;
position:relative;
font-size:1.5em;
font-family:Verdana,Helvetica,sans-serif;
text-shadow: -1px -1px black, 1px 1px;
}
p{
position:relative;
text-align:left;
font-size:1em;
font-family:Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
li
{
position:relative;
font-size:1em;
}
a{
padding:0;
float:left;
}
b{
border:3px solid black;
width:180px;
height:10.5em;
padding:10px;
float:left;
}
b1{
border:3px solid black;
position:absolute;
width:40px;
height:23em;
padding:10px;
float:right;
position: relative;
}
b2{
border:3px solid black;
position:absolute;
width:40px;
height:23em;
padding:10px;
position: relative;
}
body{
background-image:url('background.jpg');
background-size: 100%;
margin:20px;
width:800px;
padding:30px;
position: relative;
}
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
}
table{
display:inline-block;
width:640px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:5px;
text-align:center;
height:400px;
padding:0;
}
table2{
display:inline-block;
width:625px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:5px;
text-align:center;
height:50px;
}
td{
text-shadow: 0.1em 0.1em 0.2em black;
font-family:"Times New Roman", Times, serif;
}
table3{
float:right;
width:150px;
border-style:solid;
border-width:5px;
text-align:right;
height:490px;
padding:0;
}
p2{
border:10px solid black;
float:rights;
}
select{
width:200px
}
#wrap{
width: 900px;
margin: 0 auto;
}
图像链接。听着，我相信你知道它应该是什么样子的。另外，白色背景应该有一个淡紫色的图像，我放在身体作为背景。
我认为两个主要问题是：
您将主体的宽度设置为800px，第一个表的宽度设置为640px，而那个表3的宽度设置为150px。但两者的边框都是5px宽。640+10（第一个表的左右边框）+10（第二个表的左右边框）+150=810。即使标签是正确的，它们也太宽了，不能紧挨着彼此。
改变
<table3>Ad Space</table3>
而且
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
至
<div id="adCol">Ad Space</div>
而且
<div id="#imgDiv">
<img />
<img />
<img /><br />
<img />
<img />
<img />
</div>
在CSS中，将“b”更改为“#imgdiv img”，将“table”更改为“#imgdiv”，将“table3”更改为“#adcol”。那么要么减小边框的宽度，要么使其中一个边框的宽度至少小10px。
别忘了删除table2标记，并更改您所称的b1和b2以使用真正的HTML标记，并将CSS中的b1和b2更改为类名或ID。
还有，考虑不设置车身的宽度。你可能不需要那个。
在本例中，我看到了您想要完成的工作，但您应该真正使用divs，这样会更容易。
但是你为什么不直接用下面这样的布局来构建（1）个表，并将它放置在你的内容中。而不是创建多个表。你仍然可以使用CSS来添加你的效果。
null
<div id="apDiv3">
<table width="100%" height="335" border="1">
<tr>
<td width="87%" height="207">CONTENT</td>
<td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
</tr>
<tr>
<td height="50">Footer</td>
</tr>
</table>
</div>
>
我们没有标记 如果你想让两个元素靠近彼此，你必须创建一个div并将显示设置为flex，并将2个或更多的元素放入其中。如果你想带2个元素，你必须将元素的宽度设置为50%。如果你想要更多，你必须把100除以元素的数量。例如，如果您想要5个元素相邻，您必须将元素的宽度设置为20%。。
相关问题
