Почему этот основной HTML-код не работает должным образом - PullRequest
Новая
       13

Почему этот основной HTML-код не работает должным образом

0 голосов
/ 09 ноября 2018

Прежде всего, я новичок, и мне нужна небольшая помощь, чтобы исправить этот основной 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>

Я хочу, чтобы 2-й столбец находился в той же позиции, что и 1-й столбец. + Я хочу пространство между синим разделителем / разделителем и 2-й колонкой

Может кто-нибудь помочь мне исправить это или Кто-нибудь может научить меня, как это сделать? как я уже сказал, я новичок, поэтому с нетерпением жду некоторого руководства!

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Прежде всего, вы не используете правило стиля #left, которое имеет float:left в любом месте. Таким образом, с элементами p не происходит плавания. Затем вы обертываете вторую колонку символом <div id="right">, а в стилистическом графе #right нет плавающей части. Вот почему элементы <p> отображаются в виде блоков и не выровнены рядом друг с другом. Возможно, оберните первый столбец <div id="left"> и используйте следующее для вашего #left css rule: 

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

Вторая точка, для

Мне нужно пространство между синим разделителем / разделителем и вторым столбцом

Вы можете использовать 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>
0 голосов
/ 09 ноября 2018

Чтобы отрегулировать эту синюю линию слева, вам нужно будет добавить отступ слева (я сделал это 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>
...