Use CSS to create table of contents (image and block of text, aligned)

Question

I'm trying to create a sort-of table of clips on my webpage. The idea is that it's basically (in my mind) a table with a thumbnail in the left column, and then a right column would house a title, where the story appeared, a date, and a description. I have no trouble doing this using HTML <table> but I'm trying very hard to get better at CSS.

I've combed this (very helpful) site and am far ahead of where I was this morning. However, I'm having trouble with setting the "height." I don't want to set a firm height. I want the "row" to adjust to the height of an image or block of text, and for the height to be the same for both "columns."

Right now I have this.

HTML:

    <p class="imageclass">thumbnail</p>
    <p class="textclass">all sorts of text, separated by line breaks</p>

CSS:

.container {
 width:620px;
}

.imageclass {
     float:left;
     width:120px;
}

.textclass {
     float:left;
     width:500px;
}

Answer 1

您是否尝试过对.container overflow: hidden ？

Answer 2

If this is really going to be a "row", why not wrap all of the content in a div? This div will scale to be the height of its tallest child. Then if you need to manipulate the rows you can just use CSS selectors for the row class:

<div class="row">
    <p style="height:200px; background: black;" class="imageclass">thumbnail</p>
    <p class="textclass">all sorts of text, separated by line breaks</p>
</div>