Question

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

的屏幕截图

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

<!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>

Answer 1

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

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

Answer 2

你的宽度为100％，使其达到99％。

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

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

Answer 3

您对标头容器说明以下内容：保证金左：2％; 填充右：2％;

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

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

仔细观察代码，我同意其他人认为ID应该只出现在文档中。所以，你应该把它变成一个类。对于我们这些没有教授OOP的人来说，有些概念需要更长的时间才能沉入其中，直到我们将它们用于我们自己的目的。我最初遇到了问题，我试图将id与类结合起来创建类的类。 CSS不是Java。所以，SASS和LESS解决了这个缺点。

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

CSS在无表格编码中缺少右边界

3 个答案: