为什么这个基本的HTML代码不能正常工作
首先，我是新手，需要一些帮助来修复这个基本的HTML代码， 代码是：为什么这个基本的HTML代码不能正常工作,html,css,multiple-columns,Html,Css,Multiple Columns,首先，我是新手，需要一些帮助来修复这个基本的HTML代码， 代码是： <head> <title> Shared column border </title> <style type="text/css"> /*<![CDATA[*/ <!-- #left { width: 5px; float: left; border-right: 8px solid #444 } #right { margin-left: 500px;
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left { width: 5px; float: left;
border-right: 8px solid #444 }
#right { margin-left: 500px;
border-left: 8px solid #0b9cef }
/*]]>*/
</style>
</head>
<body>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Variety of Payment Methods</big>
</p>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
</html>
共享列边框
/* 要调整左边那条蓝线，你需要在左边加上填充物（我做了10px，但你可以调整）
并设置左侧的宽度，使其看起来更适合您。
这是密码
共享列边框
/* 首先，您没有使用带有float:left
anywhare的样式规则#left
。因此，p
元素没有发生浮动。
然后用
包装第二列，并且#right
样式ruke中没有浮动。这就是为什么
元素显示为块而不是相邻对齐的原因。可能会在第一列中使用
，并将以下内容用于#left
css规则：
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px // added some padding distance between the content and right border
}
第二点，关于
我想在蓝色分隔符/分隔符和第二列之间留出一些空间
您可以使用padding
（请参阅本文以了解padding和margin之间的区别：
下面是您的更新代码，以提供所需的内容（注意，我在蓝色边框和内容之间添加了25px的填充间隔，在左栏和右栏之间添加了25px的距离）
共享列边框
/*我好久没看到CDATA了！！你说的第二列是什么意思？你想用CSS来解决这个问题，但不清楚要用什么布局。你能画一个小图吗？我想你忘了把你的“第一列”元素包装在一个div
中，这个div有ID左
（？）将它粘贴到编辑器中，并在浏览器中打开它，因为这里没有足够的空间来满足所有的需要。如果你想学会做这类事情，最好让自己掌握一些框架，比如Bootstrap或基础来帮助你。
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px
}
#right {
border-left: 8px solid #0b9cef;
float: left;
padding-left: 25px;
margin-left: 25px;
}
/*]]>*/
</style>
</head>
<body>
<div id="left">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Variety of Payment Methods</big>
</p>
</div>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>