新来的，我正在创建一个网站，似乎有一个问题，我做了一个表来保存图像和一个表来保存内容。内容在左边的图像在右边。当我浮动图像表右，内容表完全移动到它的下面。当我浮动它左，有太多的空间之间的2。问题的代码是表和表3。我希望它在链接按钮旁边显示图像块，在按钮下面但在图像块旁边显示上下文块。
第二个问题是我的标志标题，这是一个图像是删除背景图像。
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: 2em;
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;
}看，我相信你得到了它应该看起来的样子。加上白色背景应该有一个淡紫色的图像，我放进身体作为背景。
3条答案
按热度按时间wmvff8tz1#
我认为两个主要问题是：
1.您正在使用不存在的标记，并且
1.设置大小时没有考虑边框的宽度
您将正文的宽度设置为800px，第一个表格的宽度设置为640px，第三个表格的宽度设置为150px，但是两个表格的边框宽度都是5px。640 + 10（第一个表格的左右边框）+10（第二个表格的左右边框）+150 = 810。即使标签是正确的，它们也太宽了，无法并排放置。
变更
以及
至
以及
在你的CSS中，将“B”改为“#imgDiv img”，将“table”改为“#imgDiv”，将“table3”改为“#adCol”，然后减小边框的宽度或者将其中一个边框的宽度至少缩小10px。
不要忘记删除table2标记，将b1和b2的名称改为真实的的HTML标记，并将CSS中的b1和b2改为类名或id。
另外，考虑不要设置主体的宽度，你可能不需要。
n53p2ov02#
在这种情况下，我明白你想要完成什么，但你真的应该使用divs，这会使它更容易。
但是你为什么不像下面这样创建一个表格，然后把它放在你的内容中。而不是创建多个表格。你仍然可以使用CSS来添加你的效果。
n1bvdmb63#
1.我们没有标记
<table2>。您应该使用<table>。1.如果要使两个元素彼此靠近，则必须创建一个div并将显示设置为flex，然后将2个或更多元素放入其中。如果要放入2个元素，则必须将元素的宽度设置为50%。如果要更多元素，则必须将元素数除以100。例如，如果你想要5个元素彼此相邻，你必须将元素的宽度设置为20%。