Три горизонтальных ребенка div цвет фона вопрос

У меня есть 3 горизонтальных плавающих divs с различными цветами фона внутри родительского div. Я пытаюсь найти лучший способ иметь цвет фона 3 divs в родительском div без установки высоты высоты 3 дочерних div (если это возможно).Три горизонтальных ребенка div цвет фона вопрос

Здесь мой стиль и код.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <style type="text/css"> 
     #packages 
     { 
      margin: 0 auto; 
      padding: 0; 
      border: 1px solid rgb(148, 183, 65); 
      width: 65%; 
      font-size: 70%; 
      font-family: Verdana, Geneva, sans-serif; 
      text-align: center; 
      float: left; 
      position: relative; 
      overflow: hidden auto; 
     } 


     .basic 
     { 
      padding: 1em 0 1em 0; 
     } 

     .silver 
     { 
      background-color: #dfedbd; 
      max-height: 100%; 
      margin: 0; 
      padding: 0; 
      width: 33.3%; 
      max-height: 100%; 
      float: left; 

     } 

      .silver a 
      { 
       color: rgb(148, 183, 65); 
      } 

     .gold 
     { 
      background-color: #bbd57c; 
      width: 33.3%; 
      float: left; 
      margin: 0; 
      padding: 0; 
     } 

      .gold a 
      { 
       color: rgb(0, 128, 0); 
      } 


     .platinum 
     { 
      background-color: #94b741; 
      width: 33.3%; 
      float: left; 
      margin: 0; 
      padding: 0; 
     } 

      .platinum a 
      { 
       color: rgb(255, 255, 255); 
      } 

     .exec 
     { 
      clear: both; 
      width: 100%; 
      padding: 1em 0 1em 0; 
      background-color: #0aa244; 
      text-align: center; 
      color: rgb(255, 255, 255); 
     } 

      .exec a 
      { 
       color: rgb(255, 255, 255); 
      } 
    </style> 

</head> 
<body> 
    <section id="packages"> 

     <div class="basic"> 
      <strong>Basic Listing:</strong> Title, Address, Phone, E-mail to Friend, Add to Favorites - 
      <a title="Sign Up!" href="/free-listing.html"><strong>FREE</strong></a> 
     </div> 

     <div class="silver"> 
      <h3><strong>Silver Listing</strong></h3> 
      <p>Silver level listings appear in search results above Basic Free listings.&nbsp;</p> 
      <p><strong>$200.00 per year</strong></p> 
      <p> 
       <span> 
        <a title="Select >>" href="#"> 
         <span> 
          <strong>SELECT &gt;&gt;</strong> 
         </span> 
        </a> 
       </span> 
      </p> 
     </div> 

     <div class="gold"> 
      <h3><strong>Gold Listing</strong></h3> 
      <p>Gold level listings appear in search results above Silver and Basic Free listings.&nbsp;</p> 
      <p><strong>$500.00 per year</strong></p> 
      <p> 
       <a title="Select >>" href="#"><span> 
        <span> 
         <strong>SELECT &gt;&gt;</strong> 
        </span></span></a> 
      </p> 

     </div> 

     <div class="platinum"> 
      <h3><strong>Platinum Listing</strong></h3> 
      <p>Platinum level listings appear in search results above Gold, Silver and Basic Free listings.&nbsp;</p> 
      <p> 
       <strong>Contains Detail View and Summary View 
       </strong> 
      </p> 
      <p><strong>$1000.00 per yea</strong><strong>r</strong></p> 
      <p> 
       <span> 
        <a title="SELECT >>" href="#"> 
         <span> 
          <span> 
           <strong>SELECT &gt;&gt;</strong></span></span></a></span> 
      </p> 

     </div> 



     <div class="exec"> 
      <h3><span><strong>Executive Listing:</strong></span></h3> 
      <p><span>All Features of the PLATINUM LISTING<strong></strong>, PLUS &nbsp;many extra fields and contact info!</span></p> 
      <p><span><strong>$2000.00 per year</strong></span></p> 
      <p> 
       <span><strong><a title="Select!" href="#">SELECT Listing Type "EXECUTIVE" during Checkout &gt;&gt;</a> 
       </strong> 
       </span> 
      </p> 
     </div> 


    </section>

источник

2013-12-06 user3075947

Вы имеете в виду цвет фона, который не проходит полностью мимо div. Обычно мне нужно добавить четкий после плавающего элемента в тег, чтобы получить фон для отображения.

Добавьте это в свою таблицу стилей.

.clear { clear: both; }

Затем добавьте это перед закрывающим тегом.

<div class="clear"></div>

Если я правильно понимаю, что должно позволить фон секции быть за все три коробки не имеет значения размер.

источник

2013-12-06 21:14:06 David

Желаю, чтобы я мог прикрепить фотографию. Мне не нужен цвет bg родительского div, но вместо этого мне нужно, чтобы 3 горизонтальных внутренних плавающих divs касались дна полной длины div (каждый цвет отличается). Я искал лучший способ принести 3, не устанавливая нижнее поле или высоту div (если только это не единственный способ) спасибо – user3075947

Три горизонтальных ребенка div цвет фона вопрос

ответ

Смежные вопросы