html - 将 <div> 下推到另一个具有 float 和清除功能的可点击 <div> 下

Question

我有一个名为“car-name”的类。在“car-name”中，我有“car-image”、“car model”和“car-feedback”，这三个都有不同的类，因为我对它们的风格各不相同。现在整个“车名”需要像图片一样可以点击。我有点管理，但在 JSfiddle 中，不透明度不起作用(我猜？)。现在所谓的“描述”也漂浮在我的汽车形象旁边，我不想要。如何将描述下推到可点击的“car-name”的最后一行？

这里 fiddle ... Fiddle

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 中添加一个 clear 以将描述推到整个事物的下方

.description { clear: both; }

JSFiddle here