Making a <div> that looks like a row in a table?
I'm having trouble creating a layout that looks like a row in a table, I need it to look like:
--------- ---------------------------
| | Line of text开发者_Python百科 |
| | Line of text |
| | |
--------- ---------------------------
so I'm trying something like:
<div>
<img src="" />
<div float=left>Line of text</div>
<div float=left>Line of text</div>
</div>
it's not coming out right, it looks like the lines of text don't take up the full height, as high as the bottom of the img. I want to solid-color the entire row, how can I do this?
Thanks
I agree with Scobal's comment....if what you are trying to display is tabular data, then it would semantically be correct to display it in a table.
If not, you could theoretically set the div's img float property to left, and then wrap both of your text divs in an outer div and float that one as well.
looks like a comment with an avatar or user data with avatar if I'm not mistaken.
<div class="user">
<img class="avatar">
<div class="user-info">
<p>line of text</p>
<p>line of text</p>
</div>
</div>
css:
.avatar {
width: <width here>.px;
float: left;
background: #ccc;
}
.user-info {
float: left;
}
Of course remember to clear your floats.
You can also substitute lists for the divs if you want it more semantic :P
精彩评论