html - 我可以对齐图像和表格之间的文本吗？

Question

我是初学者，我无法让某个页面看起来像我想要的元素方式。我在左侧 float 了一张图片，在右侧 float 了一张表格，但只要我在其中添加文本(我更喜欢介于两者之间)，它就会将表格推到页面下方。

表格和图像的 CSS:

.charactertable
{
    padding: 0px;
    float: right;
}

.characters.img
{
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}

Answer 1

由于图像是左浮动的，而表格是 float 的:右浮动，如果您打算在两者之间添加文本，则需要在 HTML 中按正确的顺序放置它们。

顺序应该是这样的:

.charactertable {
    padding: 0px;
    float: right;
    border: 2px #DDD solid;
}
.characters.img {
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}

<img src="http://lorempixel.com/100/100" alt="" class="characters img">

<table class="charactertable">
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas cumque voluptatum est esse ea. Quis nulla cumque nihil vitae ipsa excepturi veniam ut perspiciatis quibusdam minima ipsam reprehenderit. Deserunt reiciendis.