Question

我正在尝试将图像放在左侧的div中。在它的右侧，我需要标题和（在标题下）文本

我希望标题和文字始终位于图片的右侧

我不能拥有它，文字会回到图像

下面

http://jsfiddle.net/#&togetherjs=60Npd0DQ8G

提前致谢

Answer 1

我的建议：

创建两个DIV。把它们漂浮下来。将图像放在Div #A中，并为DIV #B中的标题和文本嵌套更多DIV。使用Overflow Hidden在另一个DIV中包围整个事物（或对Div #B之后的任何元素应用某种“clearfix hack”。

<div style="overflow: hidden;">
   <div id="A" style="float:left; width: 50%;">
      <img src="yourimage.jpg">
   </div>
   <div id="B" style="float: left; width: 50%;">
      <div>
         Title
      </div>
      <div>
         Text
      </div>
   </div>
</div>

Answer 2

这样做：

<p>
    This is some text.
    <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle"> This is some text.</img>
</p>

图像右侧中间对齐后的文字。

Answer 3

<强> Demo

CSS

img, .wrapper_rand {
    display: inline-block; /* make them in one line */
     word-wrap: break-word; /* break very long words */
    border: 1px solid black; /* just for display */
    vertical-align: middle; /* vertical centering */

}
.wrapper_rand {
    width: calc(100% - 300px); /* this will make sure that right div will occupy remaining space (1005 - width of image) */
}
img {
    width:256px; /* width of image */
}
ul {
    list-style: none; /* no styles of li */
}

左侧的CSS图像，权利的标题和文本

3 个答案: