html - 并排显示图像和文本 HTML

Question

我正在尝试在我的网页上显示一个图像和一些文本，它们彼此相邻 float ，如下所示。

我基本上已经尝试了我在这个主题上发现的前两个 SO 问题中建议的所有方法:

• How to display items side-by-side without using tables?
• HTML Code to put image in left and text in right side of screen with footer below?

但是，无论我尝试什么组合，这都是我获得的结果:

这是 HTML第一个示例的代码(似乎根本不起作用):

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100>
    <div>some text here</div>
</div>

这是 HTML第二个示例的代码不同，因为文本未包装到 <div> 中容器(但似乎只适用于有限数量的文本):

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=300>
    some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here
</div>

css文件来自Nicholas Gallagher's微clearfix:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

你能告诉我出了什么问题以及如何解决这个问题吗？

Answer 1

Demo

CSS

img {
    display: inline-block;
    vertical-align: middle; /* or top or bottom */
}
.text {
    display: inline-block;
    vertical-align: middle; /* or top or bottom */
}

html

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width="100px" />
    <div class="text">some text here</div>
</div>

---

Final Demo

CSS

img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}
.text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 100px);    
}