Question

首先，我是新手，我需要一些帮助来修复此基本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;
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 &amp; 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>

我想将第二列放在与第一列相同的位置。 + 我想在蓝色的分隔符/分隔线和第二列之间留一些空间

有人可以帮助我解决此问题吗？有人可以教我如何做到这一点吗？正如我所说的，我是新手，所以期待一些指导！

Answer 1

首先，您没有使用具有#left的样式规则float:left。因此p元素没有浮动。然后，您用<div id="right">包裹了第二列，而#right样式的ruke中没有浮点数。这就是<p>元素显示为块且彼此不对齐的原因。也许用<div id="left">包装第一列，然后将以下内容用于#left css规则：

#left {
        float: left;
        border-right: 8px solid #444;
        padding-right: 25px // added some padding distance between the content and right border
    }

第二点，用于

我要在蓝色分隔符/分隔线和第二列之间留一些空间

您可以使用padding（请参阅本文，以查看填充和边距之间的区别：Margin vs Padding。

这是您提供所需内容的更新代码（请注意，我在蓝色边框和内容之间添加了25px的填充距离，在左列和右列之间添加了25px的距离。）

<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 &amp; 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>

Answer 2

要调整左侧的蓝线，您需要在左侧添加填充（我将其设置为10px，但您可以对其进行调整）并设置左侧的宽度以适合您。这是代码

<body>
 
<title>
  Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
    width: 300px;
    
    float: left;
	border-right: 8px solid #444 }
    
    
#right {
    margin-left: 500px;
	border-left: 8px solid #0b9cef; 
    padding-left: 10px;
    }
/*]]>*/
</style>

<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 &amp; 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代码无法正常工作

2 个答案: