19

例如，您想在文本旁边显示图像，通常我会这样做：

<table>
    <tr>
        <td><img ...></td>
        <td>text</td>
    </tr>
</table>

有更好的选择吗？

4

9 回答 9

20

您应该将它们漂浮在已清除的容器内。

例子：

https://jsfiddle.net/W74Z8/504/

在此处输入图像描述

一个干净的实现是“clearfix hack”。这是Nicolas Gallagher的版本：

/**
 * 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.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}
​
于 2012-07-11T18:29:35.270 回答
9

是的，div 和 CSS 通常是放置 HTML 的更好、更简单的方法。有许多不同的方法可以做到这一点，这一切都取决于上下文。

例如，如果您想在文本的右侧放置一个图像，您可以这样做：

<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>

而如果你想并排显示多个项目，float 通常也是首选。例如：

<div>
  <img src="image1.png" style="float: left;" />
  <img src="image2.png" style="float: left;" />
  <img src="image3.png" style="float: left;" />
</div>

只要您有水平空间，将这些图像浮动到同一侧就会彼此相邻放置。

于 2012-07-11T18:34:16.507 回答
8

所有这些答案都可以追溯到 2016 年或更早...有一个新的网络标准使用flex-boxes. 一般来说floats，对于这些类型的问题现在是不赞成的。

HTML

<div class="image-txt-container">
  <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
  <h2>
    Text here
  </h2>
</div>

CSS

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

小提琴示例：https ://jsfiddle.net/r8zgokeb/1/

于 2018-11-08T21:18:30.343 回答
3

这些天 div 是新的规范

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
于 2012-07-11T18:22:19.957 回答
1

怎么样display:inline？

<html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>
于 2012-07-11T18:23:18.600 回答
1

通常我这样做：

<div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>
于 2012-07-18T07:19:47.633 回答
0

这取决于您要做什么以及您要显示的数据/信息类型。通常，表格是为显示表格数据而保留的。

您的情况的替代方法是使用 css。一个简单的选择是浮动您的图像并给它一个边距：

<p>
    <img style="float: left; margin: 5px;" ... />
    Text goes here...
</p>

这将导致文本环绕图像。如果您不希望文本环绕图像，请将文本放在单独的容器中：

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

请注意，可能需要为段落标签分配宽度以显示您想要的方式。另请注意，对于出现在浮动元素下方的元素，您可能需要添加样式“clear:left;” （或明确：正确，或明确：两者）。

于 2012-07-11T18:31:57.510 回答
0

negative margin会有很大帮助的！

html DOM 如下所示：

<div class="main">
  <div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>

和CSS：

.main {
  float:left;
  width:100%;
}

.main_body{
  margin-left:210px;
  height:200px;
}
.left{
  float:left;
  width:200px;
  height:200px;
  margin-left:-100%;
}

它的main_body意志响应，它可以帮助你！

于 2016-03-10T07:33:07.840 回答
-1

尝试在标签中调用图像<DIV>，这将允许更流畅和更快的加载时间。请注意，因为这是背景图片，您也可以在<DIV></DIV>标签之间的图片上放置文本。这也适用于自定义商店/商店列表...发布一个很酷的“售罄！”覆盖，或任何你可能想要的。

这是图片/文本并排的版本，可用于博客文章和文章列表：

<div class="whatever_container">
<h2>Title/Header Here</h2>
 <div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>
于 2016-09-13T13:37:03.587 回答