как сделать интервал HTML / CSS - PullRequest
Новая
       4

как сделать интервал HTML / CSS

1 голос
/ 26 августа 2010

У меня есть html / css код, который приведёт к этому. См. Изображение ниже. Я хотел бы добавить еще 3 столбца под первое «Будущее событие». Как я могу это сделать? уже выложили код: спасибо какой будет код для интервалов между абзацами? Спасибо пожалуйста, смотрите изображение здесь: http://www.freeuploadimages.org/images/nc1xjrptgddvk1yxvnad.png

Я бы хотел настроить пространство «Будущего события» так, как бы хотел, чтобы оно было немного вверху. Это возможно?

Это код: пожалуйста, проверьте обновленные коды здесь: http://jsfiddle.net/b5fMe/4/

Мне нужен разделитель между ними, но

не работает: - (

Ответы [ 2 ]

1 голос
/ 26 августа 2010

, чтобы дублировать три блока, фактически вы должны скопировать строку, тег tr, который включает их.Я копирую / вставляю вам код: 

<tr>
        <td class="content threecol first" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 25%; padding-right: 20px; padding-left: 0pt; padding-top: 20px; border-right: 1px solid rgb(204, 204, 204);"><!--<h2 class="secondary-heading" 
      style="font-size: 18px;font-weight: normal;color: #333;font-style: 
      normal;font-family: Georgia;text-align: 
     left;margin-bottom: 15px;">Future Event</h2>-->

          <h2 class="secondary-heading">Future Event</h2>
          <p2 class=".secondary-paragraph"> Sed ut persp iciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque.</p2></td>
        <td class="content threecol" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 28%; padding-right: 20px; padding-left: 20px; padding-top: 20px; border-right: 1px solid rgb(204, 204, 204);"><h2 class="secondary-heading" style="font-size: 18px; font-weight: normal; color: rgb(51, 51, 51); font-style: normal; font-family: Georgia; text-align: left; margin-bottom: 15px;">Future Event</h2>
          <p>Sed ut persp iciatis unde omnis iste 
            natus error sit voluptatem accusantium doloremque laudantium, totam rem 
            aperiam, eaque.</p></td>
        <td class="content threecol last" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 28%; padding-right: 15px; padding-left: 20px; padding-top: 20px; margin-right: 15px; border: 0pt none;"><p class="btn" style="text-align: center; background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);">&nbsp; </p>
          <p class="btn" style="background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);"> <a href="#" style="color: rgb(255, 255, 255); text-decoration: none; font-weight: normal; font-size: 26px; font-family: Georgia; text-transform: uppercase; text-align: center; display: block; padding: 20px 0pt;"> <img height="50" border="0" width="119" alt="" src="http://gallery.mailchimp.com/86b4d752e397a2dbd09e3dd60/images/logowikima4.gif" style="text-align: center; display: block;"></a> </p>
          <p class="btn" style="text-align: center; background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);">&nbsp; </p>
          <p> Let us know if you are coming and if you have guests.</p>
      </td></tr>

В вашем коде вы найдете указанный выше код, просто вставьте тот же код под ним.1007 * для secondary-heading класса.

, например .secondary-heading {line-height:1.4;}, просто измените его в соответствии с вашими потребностями.

1 голос
/ 26 августа 2010

У вас есть CSS: 

   #content .secondary-heading{
   font-size:18px;
font-weight:normal;
color:#333;
font-style:normal;
font-family:Georgia;
text-align:left;
margin-bottom:150px;
    }

Который указывает:

margin-bottom:150px;

Но в вашем HTML у вас есть встроенный код для второго

<h2 class="secondary heading">, который гласит:

style="font-size: 18px;font-weight: normal;color: #333; font-style: normal;font-family: Georgia;text-align: left;margin-bottom: 15px;".

Выньте этот встроенный стиль, и он должен вести себя как ожидалось.

РЕДАКТИРОВАТЬ

В CSS: измените margin-bottom:150px; на margin-bottom:15px; после удаления встроенного стиля.

Надеюсь, это поможет!

...