Поплавок «редактировать» ссылка справа Heading (должен держать заголовок тега блока)

Question

Учитывая следующий HTML

<div class="module">   
      <div class="header"> 
       <h1>Test Heading</h1> 
       <a href="">edit</a> 
      </div> 
      <div class="body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p> 
      </div> 
     </div> 

и на следующий CSS

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; } 
      h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; } 

      .module { } 
       .module .header h1 { } 
       .module .header a { } 

Я имею трудное время выяснить, как плавать ссылку «edit» справа от тега h1, но сохраняя тег h1 в качестве элемента блока, чтобы он имел свою нижнюю линию (border-bottom)

Может ли кто-нибудь предложить мне несколько советов ... done это раньше? Заранее спасибо

Answer 1

Существуют различные стратегии для достижения этой цели. Вы можете либо поместить контейнер для исправления поплавка, либо использовать сгенерированный контент, чтобы очистить float. Я попытаюсь объяснить как w/code. Для обоих вы можете сохранить разметку, но вам нужно переместить подчеркивание из h1 в класс .header. Затем поплавьте заголовок влево, отредактируйте вправо и исправьте поплавки, поместив класс .header. Этот метод имеет тот недостаток, что в зависимости от того, что происходит после того, как, но работает для изолированной части кода:

h1 { 
    margin: 0; 
    padding: 0; 
    color: #333333; 
    font-size: 40px; 
    font-weight: normal; 
    letter-spacing: 0; 
    line-height: 1.3em; 
} 

.header { border-bottom: 3px solid #333333; } 
.module .header h1 { float: left; } 
.module .header a { float: right; } 
.module .header { float: left; width: 100%; } 

имхо лучше решение использовать CSS-контент, чтобы очистить противостоящие поплавки вместо плавающего .header контейнер. Но имейте в виду, что это вызовет проблемы с менее браузерами, поддерживающими CSS.

h1 { 
    margin: 0; 
    padding: 0; 
    color: #333333; 
    font-size: 40px; 
    font-weight: normal; 
    letter-spacing: 0; 
    line-height: 1.3em; 
} 

.header { border-bottom: 3px solid #333333; } 
.header:after { content: "."; display: none; clear: both; } 
.module .header h1 { float: left; } 
.module .header a { float: right; } 
.module .header { width: 100%; } 

Для получения дополнительной информации о первом методе см статью Эрика Мейера http://www.complexspiral.com/publications/containing-floats/. Второй метод документирован в http://www.positioniseverything.net/easyclearing.html.