Тэг <a> выдает выравнивание

Question

В зависимости от того, где я положил тег </a>, коробки выглядят по-разному. Вот как это выглядит на данный момент.

JSFiddle

<a href="#"> <div class="box"> 
    <header><h2>Responsive C3</h2></header> 
    <div id="chartA"> 
    </div> 
</div></a> 

Как можно сохранить первое поле в качестве интерактивного объекта в то время как второе окно выравнивается бок о боке? Без тегов <a></a> они выравниваются точно.

Answer 1

класс box позволяет вашим блокам float:left и поэтому бок о бок. Если вы примените class="box" к тегу a вместо тега div, он будет работать так, как вы ожидаете.

<a href="#" class="box"> 
    <div> 
    <header> 
     <h2>Responsive C3</h2> 
    </header> 
    <div id="chartA"> 
    </div> 
    </div> 
</a> 

Вот хорошая статья, чтобы понять больше о float: https://css-tricks.com/all-about-floats/ и еще около display: https://css-tricks.com/almanac/properties/d/display/