1

我创建了一个不使用表格的 CSS 2 列页面。在每一列中，我想在这些列中显示框，同样不使用表格。我能够在每列中创建 2 列和框，但问题是，在每个框中，缺少右边框。这是显示问题的屏幕截图：

代码有什么问题？如何使用无表格编码和有效标记在右侧显示边框？以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box-in-columns</title>
<style media="screen" type="text/css">
body {
background:#FDEDF2;
margin:0;
padding:0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 9pt;
}
#header h1, #header h2, #header p {
margin-left:2%;
padding-right:2%;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#FDEDF2;
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#FDEDF2; 
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden; 
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
#table {
display:table;
width:100%;
margin:0;
padding:4px;
border:1px solid #607080;  
background:#FFFFFF;
}
.row-header {
display:table-row;
color: #b00020;
}
.row {
display:table-row; 
}
.row a {
text-decoration:none;
}
.row a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<div id="header">
<h1>This is the header</h1>
</div>
<div id="container2">
<div id="container1">
<div id="col1">
<p>
<span id="table">
<span class="row-header"> News </span>
<span class="row"> <span class="cell"> <a href="http://www.cnn.com/"> CNN </a> </span></span>
<span class="row"> <span class="cell"> <a href="http://www.usatoday.com/"> USA Today </a> </span></span>
</span>
</p>
<p>
<span id="table">
<span class="row-header"> Technology </span>
<span class="row"> <span class="cell"> <a href="http://www.google.com/"> Google </a> </span></span>
<span class="row"> <span class="cell"> <a href="http://www.yahoo.com/"> Yahoo</a> </span></span>
</span>
</p>
</div>
<div id="col2">
<p>
<span id="table">
<span class="row-header"> Stores </span>
<span class="row"> <span class="cell"> <a href="http://www.walmart.com/"> Walmart </a> </span></span>
<span class="row"> <span class="cell"> <a href="http://www.pigglywiggly.com/"> Piggly Wiggly </a> </span></span>
</span>
</p>
<p>
<span id="table">
<span class="row-header"> Games </span>
<span class="row"> <span class="cell"> <a href="http://www.gamespot.com/"> GameSpot </a> </span></span>
</span>
</p>
</div>
</div>
</div>
<div id="footer">
<p>This is the footer</p>
</div>
</body>
</html>
4

3 回答 3

1

默认情况下，宽度和高度应用于内容。如果您指定边距和填充，则元素的大小将超出您的预期。

要更改此行为，请添加“box-sizing:border-box;” 到您的#table 规则并将宽度设置为 100%；

于 2013-12-09T17:00:53.243 回答
0

你的宽度是 100% 变成 99%。

#table {
display:table;
width:99%;
margin:0;
padding:4px;
border:1px solid #607080;  
background:#FFFFFF;
}

或者更确切地说，使用像素。

于 2013-09-04T21:19:18.650 回答
0

您为标题容器声明以下内容：margin-left:2%; 填充权：2％；

此页面提供了一个很好的示例，说明了在设计视口时要记住的内容：https ://www.w3schools.com/css/css_boxmodel.asp 。

当我查看屏幕截图时，我最初的想法是 min-width 设置可能太短而无法查看框的另一端。

仔细查看代码，我同意其他人的观点，即 id 应该只出现在文档中。所以，你应该把它变成一个类。对于我们这些没有学过 OOP 的人来说，有些概念需要更长的时间才能理解，直到我们将它们用于我们自己的目的。我最初对此有疑问，我尝试将 id 与类结合起来创建类。CSS 不是 Java。因此，SASS 和 LESS 解决了这个缺点。

我认为您从 FrontPage 编码中获得了您的 SPAN 想法。

于 2018-01-04T03:55:18.657 回答