显示彼此相邻的图像和文本HTML

Question

我试图在我的网页上显示一个图像和一些文字，如下所示。

我已经基本上尝试了我在这个主题上找到的前两个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 micro 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);    
}

Answer 2

您的问题是您已应用了clearfix但没有应用浮点数！尝试添加以下

.cf img {float:left;}
.cf div  {float:left;}

Demo

Clearfix .cf无需浮动。它的目的是确保浮动元素的“父”元素“扩展”以包含浮动元素。添加backgound-color证明了这一点：http://jsfiddle.net/kxpur7z3/1/

我在答案中的代码将每个元素浮动到左侧。请注意，“浮动”会从文档的“自然流”中删除元素。

Clearfix Demo

以下是一些很好的参考资料：

• https://developer.mozilla.org/en-US/docs/Web/CSS/float
• http://www.sitepoint.com/web-foundations/floating-clearing-css/

所以你想要很多文字。当块和内联块元素扩展以适合其内容时，您需要应用一些宽度属性。你在这里有一些选择。

• 为文字应用特定宽度：width:80%，width:300px等
• 将计算出的宽度应用于文本（感谢@ 4dgaurav提醒我这一点）：width:calc(100% - 100px)
• 使用赞美百分比：img {width:20%;} div {width:80%;}
在图片和文字上动态显示

Demo of various options

Answer 3

我刚刚更新了你的html，如下所示。

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

我只添加了一个额外的CSS，如下所示。

.cf > div
{
display:table-cell;
vertical-align:top;
}

DEMO

Answer 4

使用bootstrap类，这很容易实现这个

示例：

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

使用bootstrap.min.css库

-Thanks

Answer 5

使用此html

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

然后是CSS

.leftcol{float:left; width:50%}
.rightcol{float:left; width:50%}
.clear{clear:both; display:block;}

Answer 6

这个答案可能有点迟了，但由于我也遇到了这个问题，我在小提琴上创建了一个工作模型（没有浮点数和纯粹的内联块）。

我不想使用浮动，因为它会弄乱父容器的高度和背景。

HTML

<div class="box">
  <div class="box-content">

    <div class="box-image">
      <div class="wrap">
        <img src="https://pbs.twimg.com/media/DQckroiVwAAPw8Y.jpg" />
      </div>
    </div>

    <div class="box-text">
      <div class="wrap">
        Hier komt de tekst en wel een hele lange tekst, eigenlijk te lange tekst. Well this could be even longer than the Dutch text if it would be in English. Und es könnte auch noch etwas an Deutschen Text beinhalten, aber das würde schon ein sehr lange Text werden. Dus houden we het maar gewoon bij Nederlandse tekst.
      </div>
    </div>

  </div>
  <div class="box-footer">
    <div class="wrap">
      hier komt de bijlage
    </div>
  </div>
</div>

CSS

.box {
  width: 600px;
  border: 5px solid #a1a1a1;
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.box-content {
  padding: 10px;
}

.box-image {
  width: 30%;
  display: inline-block;
}

.box-image .wrap {
  padding-top: 10px;
  width: 100%;
}

.box-image img {
  width: 100%;
}

.box-text {
  display: inline-block;
  text-align: justify;
  font-size: 20px;
  vertical-align: top;
  width: 68%;
}

.box-text .wrap {
  padding: 5px;
}

.box-footer {
  padding: 10px;
  border-top: 4px solid #a1a1a1;
  text-align: center;
  background: #f1f1f1;
}

Fiddle