一年前，我在编写CSS方面完全是绿色的，但是由于主要是通过这个网站，我才得以很好地理解，尤其是在您经常展示该解决方案的jsfiddle示例中。
我一直在网上寻找解决方案。
我似乎无法在2 div之间设置分隔线
我的布局如下所示：https://jsfiddle.net/9cgm7nsv/
* {margin: 0px; padding: 0px; word-wrap: break-word; font-size: 11px; font-family: Verdana, Tahoma, Arial, sans-serif; box-sizing: border-box;}
body {color: rgb(48, 48, 48); background: rgb(170, 170, 170); margin: 1px 0px 0px; }
a {color: rgb(70, 122, 167); font-weight: bold; text-decoration: none; background-color: inherit;}
a img { border: none; }
p { padding: 1px 3px; }
h1 { background-color: rgb(58, 82, 127); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
h2 { background-color: rgb(58, 82, 127); color: rgb(204, 204, 204); margin: 0px; padding: 5px 10px; }
h3 { background-color: rgb(10, 10, 10); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
h4 { background-color: rgb(51, 51, 51); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
table {border-collapse:collapse; margin: 0px; color: black; width: 100%;}
table, td, th {border:1px solid black; font-size: 11px; padding: 2px 5px 2px;}
th {background-color: rgb(120, 120, 120); color: rgb(230, 230, 230);}
button {padding: 3px;}
#container { width: 1202px; margin: 3px auto;padding: 1px; text-align: left; border:black; background: rgb(184, 184, 184);}
#navigation { height: 2.2em; line-height: 2.2em; width: 1200px; border: 1px solid rgb(255, 255, 255); background: rgb(75, 75, 75);}
#navigation li { float: left; list-style-type: none; border-right: 1px solid rgb(255, 255, 255); white-space: nowrap; }
#navigation li a { display: block; padding: 0px 10px; font-size: 0.8em; font-weight: normal; text-transform: uppercase; background-color: inherit; color: rgb(255, 255, 255); }
#col-container {
display: table;
width: 1200px;
border: 1px solid rgb(255, 255, 255);
margin: 1px 0px;
background:#FFF;
}
#col {
display: table-cell;
padding: 1px;
width: 60%;
vertical-align: top;
background:blue;
color:#222;
border: 1px solid rgb(200, 200, 200);
}
#colside {
display: table-cell;
padding: 1px;
width: 20%;
vertical-align: top;
background:blue;
color:#222;
border: 1px solid rgb(200, 200, 200);
}
#splitcontentleft {
float:left;
width:50%;
}
#splitcontentright {
float:right;
width:50%;
}
#imgbutton {padding: 0px;}
#footer {
clear: both;
width: 1200px;
margin: 0px;
padding: 8px 0px;
border: 1px solid rgb(255, 255, 255);
font-size: 0.9em;
color: rgb(240, 240, 240);
background: rgb(50, 50, 50);
}
#footer p { margin: 0px; padding: 0px; text-align: center; }
div.box {
margin: 0px 0px 1px 0px;
border: 1px solid rgb(192, 192, 192);
background-color: rgb(250, 251, 252);
color: rgb(80, 80, 80);
line-height: 1.3em;
}
div.vertical-line{
width: 10px;
background-color: white;
height: 100%;
float: left;
}
div.horisontal-line{
width: 100%; /* Line width */
background-color: white; /* Line color */
border-top: 1px solid rgb(100, 100, 100);
border-bottom: 1px solid rgb(100, 100, 100);
height: 3px;
float: left;
}<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="global2.css" title="global" media="screen,projection" />
<title>Local page</title>
</head>
<body>
<div id="container">
<script src="nav2.js"></script>
<div id="col-container">
<div id="colside">
<div class="box">
<h4>Left side</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</div>
<div class="vertical-line"></div> <!-- Divider between left side and middle -->
<div id="col">
<div class="box">
<h4>Center</h4>
<p>Test text</p>
<p>Test text</p>
</div>
<div class="horisontal-line"></div> <!-- Divider between upper and lower part of middle -->
<div id="splitcontentleft">
<div class="box">
<h4>Lower left</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</div>
<div class="vertical-line"></div> <!-- DOESN'T work. Divider between lower left and lower right -->
<div id="splitcontentright">
<div class="box">
<h4>Lower right</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</div>
</div>
<div class="vertical-line"></div> <!-- Divider BETWEEN middle and right side -->
<div id="colside">
<div class="box">
<h4>Right side</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</div>
</div> <!-- col-container end -->
<script src="footer2.js"></script>
</div> <!-- Container end -->
</body>
</html>
问题在页面的左下方和右下方之间。
我随便尝试了所有方法，但是我希望一定有一个我没有尝试过的解决方案。
我不时尝试了一年多，仍然没有运气。
该页面的大部分内容都很完美，只是两个部分之间没有分隔符。
任何建议或信息都非常有用。
预先非常感谢。
答案 0 :(得分：0)
我更改了CSS中的两件事，使width:100%;的{{1}}都一样：
id其余的更改都在HTML中。决定保留#splitcontentleft {
float:left;
width:100%;
}
#splitcontentright {
float:right;
width:100%;
}
以便页面可以在IE和其他浏览器中正确呈现。为此，您必须具有HTML表。基本表格格式为：
display:table;当我查看表格/表格的格式时，我数了5列和3行。首先，我将<table> <!-- opens the table -->
<tr> <!-- the first row in your table -->
<td> <!-- your first table cell/column inside the row -->
</td>
</tr>
</table> <!-- everything has to close -->
更改为<div id="col-container...以标识表布局：
<table id="col-container...我添加了<body>
<div id="container">
<script src="nav2.js"></script>
<table id="col-container">
来标记第一行，然后将<tr>更改为<div。请注意，我离开了您的样式<td，并添加了id="colside"。您需要指明行距，以免每行最后没有两个空的rowspan="3"（您的<td>右侧是重复的内容）。
<div>下一部分是您的<tr>
<td id="colside" rowspan="3">
<div class="box">
<h4>Left side</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</td>
，再次将其从vertical-line更改为<div>，然后添加<td。
rowspan="3"然后，我们更改您的“中心”栏。由于顶部仅在第一行，因此该区域略有变化。但是...如果您查看其底下的内容，它需要跨越3列。因此，我们将其更改为：
<td class="vertical-line" rowspan="3"></td> <!-- Divider between left side and middle -->
我们还没有留下前5列的代码。我们需要重复左侧的操作并添加另一条垂直线。然后我们用 <td id="col" colspan="3"> <!-- center wrapper -->
<div class="box">
<h4>Center</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</td> <!-- close center wrapper -->
关闭表行。
</tr>这下一部分是用于将“中心部分”从其下方的左右分开的水平线。这代表表格的第二行。
<td class="vertical-line" rowspan="3"></td> <!-- Divider BETWEEN middle and right side -->
<td id="colside" rowspan="3">
<div class="box">
<h4>Right side</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</td>
</tr>
下一部分是第三行，位于该水平线下方。这是导致显示器出现问题的部分。这行对我来说似乎有点粗，肯定超过10像素，但这可能是浏览器问题。仍然可以。
<tr>
<td class="horisontal-line" colspan="3"></td> <!-- Divider between upper and lower part of middle -->
</tr>
最后，您关闭了<tr>
<td id="splitcontentleft">
<div class="box">
<h4>Lower left</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</td>
<td class="vertical-line"></td> <!-- DOESN'T work. Divider between lower left and lower right -->
<td id="splitcontentright">
<div class="box">
<h4>Lower right</h4>
<p>Test text</p>
<p>Test text</p>
</div>
</td>
</tr>
</table>这是所有这些更改的结果。我希望此练习可以帮助您更好地理解编码。如有任何疑问，请告诉我。
</table> <!-- col-container end -->
<script src="footer2.js"></script>
</div> <!-- Container end -->
* {margin: 0px; padding: 0px; word-wrap: break-word; font-size: 11px; font-family: Verdana, Tahoma, Arial, sans-serif; box-sizing: border-box;}
body {color: rgb(48, 48, 48); background: rgb(170, 170, 170); margin: 1px 0px 0px; }
a {color: rgb(70, 122, 167); font-weight: bold; text-decoration: none; background-color: inherit;}
a img { border: none; }
p { padding: 1px 3px; }
h1 { background-color: rgb(58, 82, 127); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
h2 { background-color: rgb(58, 82, 127); color: rgb(204, 204, 204); margin: 0px; padding: 5px 10px; }
h3 { background-color: rgb(10, 10, 10); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
h4 { background-color: rgb(51, 51, 51); color: rgb(204, 204, 204); margin: 0px; padding: 3px 10px; }
table {border-collapse:collapse; margin: 0px; color: black; width: 100%;}
table, td, th {border:1px solid black; font-size: 11px; padding: 2px 5px 2px;}
th {background-color: rgb(120, 120, 120); color: rgb(230, 230, 230);}
button {padding: 3px;}
#container { width: 1202px; margin: 3px auto;padding: 1px; text-align: left; border:black; background: rgb(184, 184, 184);}
#navigation { height: 2.2em; line-height: 2.2em; width: 1200px; border: 1px solid rgb(255, 255, 255); background: rgb(75, 75, 75);}
#navigation li { float: left; list-style-type: none; border-right: 1px solid rgb(255, 255, 255); white-space: nowrap; }
#navigation li a { display: block; padding: 0px 10px; font-size: 0.8em; font-weight: normal; text-transform: uppercase; background-color: inherit; color: rgb(255, 255, 255); }
#col-container {
display: table;
width: 1200px;
border: 1px solid rgb(255, 255, 255);
margin: 1px 0px;
background:#FFF;
}
#col {
display: table-cell;
padding: 1px;
width: 60%;
vertical-align: top;
background:blue;
color:#222;
border: 1px solid rgb(200, 200, 200);
}
#colside {
display: table-cell;
padding: 1px;
width: 20%;
vertical-align: top;
background:blue;
color:#222;
border: 1px solid rgb(200, 200, 200);
}
#splitcontentleft {
float:left;
width:100%;
}
#splitcontentright {
float:right;
width:100%;
}
#imgbutton {padding: 0px;}
#footer {
clear: both;
width: 1200px;
margin: 0px;
padding: 8px 0px;
border: 1px solid rgb(255, 255, 255);
font-size: 0.9em;
color: rgb(240, 240, 240);
background: rgb(50, 50, 50);
}
#footer p { margin: 0px; padding: 0px; text-align: center; }
div.box {
margin: 0px 0px 1px 0px;
border: 1px solid rgb(192, 192, 192);
background-color: rgb(250, 251, 252);
color: rgb(80, 80, 80);
line-height: 1.3em;
}
div.vertical-line{
width: 10px;
background-color: white;
height: 100%;
float: left;
}
div.horisontal-line{
width: 100%; /* Line width */
background-color: white; /* Line color */
border-top: 1px solid rgb(100, 100, 100);
border-bottom: 1px solid rgb(100, 100, 100);
height: 3px;
float: left;
}