向下推<div>另一个<div>具有浮动和清除的可点击对象

Question

我有一个名为" car-name"的类。在" Car-Name"中，我有"汽车形象"，"汽车模型"one_answers" Car Feedback"，这三个都带有单独的类，因为我对每个类别的样式都不同。现在，整个"汽车名"需要像图像一样可单击。我有点设法，但是在JSFIDDLE中，不透明度不起作用（我想？）。现在，所谓的"描述"也浮在我的汽车图像旁边，我不想要。如何在可单击的"汽车名"的最后一行下向下推描述？

在这里小提琴...小提琴

html

<div class="car-name">
    <a href="/our-cars" &text="carmake">
                    <div class="car-image"><img alt="" src="http://placehold.it/100x100">
                        bestcarmodel
                        <div class="car-review">feedback nnnnnnnnnnnnnn nnnnnnnnnnnnnn nnnnnnnn nnnnnnnnnn nn</div></div></a>
    <div class="description">this belongs under the clickable part --- ooooooooooooooooooooooooooooooooo oo o o o o ooooooooooooooooooooooooooooooooooooooooooooo o o o oooooooooooooooooooooooo                   o oo o ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo              oooooooooooooooooooooo o o</div>

CSS

.car-image {
    height:45px;
    width:45px;
    padding:0 0 5px 55px;
    position:relative;
    word-wrap: break-word; 
    float:left;
    clear:both;
    display:inline-block;
}
.car-image img {
    max-width:100%;
    max-height:100%;
    left: 0;
    position:absolute;
}
.car-review {
    padding:0 0 10px 0;
    width:150%;
    font-weight:bold;
    text-decoration: underline;
}
.car-name:hover {
    opacity:1.5;
}

Answer 1

您的标记存在问题，<a>和<div>标签没有按正确的顺序关闭，因此它们被交织在一起并且没有嵌套。标记固定后，它应该可以工作。

尝试以下操作：

<div class="car-name"> 
    <a href="/our-cars" &text="carmake">
        <div class="car-image"><img alt="" src="http://placehold.it/100x100"/</div>
        bestcarmodel
        <div class="car-review">feedback nnnnnnnnnnnnnn nnnnnnnnnnnnnn nnnnnnnn nnnnnnnnnn nn</div>
    </a>
</div>
<div class="description">this belongs under the clickable part --- ooooooooooooooooooooooooooooooooo oo o o o o ooooooooooooooooooooooooooooooooooooooooooooo o o o oooooooooooooooooooooooo o oo o ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooo o o</div>

然后到CSS添加了一个清除以推动整个内容下方的描述

.description { clear: both; }

jsfiddle在这里