html - 无表的 CSS 问题

Question

总的来说，我知道如何使用 css 但不知道高级 css 所以我需要一些帮助才能开始。不幸的是，如果没有 css，我找不到任何好的和体面的表格指南，而且我想做的部分非常棘手。所以这就是我想要的以及到目前为止我所做的。

顺便说一句，高度不是固定的，所以我希望它灵活，因为正文可能很长或很小

这是我到目前为止所做的

http://jsfiddle.net/VmnDj/1/

但这似乎无法正常工作，因为最小高度是正文所在的位置，而且它从不包含整个图片。图片的某些部分超出了容器。请你能为此做出贡献并解释我为什么你必须采取每一步吗？我的目的是从中学习，而不仅仅是解决方案。如果您需要更多信息，请告诉我。 非常感谢您提前

Answer 1

试试这个:

JSFIDDLE:http://jsfiddle.net/86FMw/

请注意，没有固定的高度，当正文较长时，框会变大。

HTML

<div class="cartitem">
    <div class="left">
        <img src="http://images.pictureshunt.com/pics/p/pear-5428.jpg" width="60" height="60" alt=""/>
    </div>
    <div class="toptext">
        top text top text top text
    </div>
    <p>
        text text text text<br/>
        text text text text  text text text text text text text text <br/>
        text text text text text text text text <br/>  
    </p>
    <div class="buttonbar">
        <button>click me</button>
    </div>
</div>

CSS

.cartitem {
    position: relative;
    padding-left: 80px;
    border: 1px solid #333;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
}

.toptext {
    background: silver;
}

.buttonbar {
    text-align: right;
}