如何在不使用表格的情況下並排顯示項目？

Question

例如，您想在文本旁邊顯示圖像，通常我會這樣做：

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

有更好的選擇嗎？

Answer 1

您應該將它們漂浮在已清除的容器內。

例子：

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;
}

Answer 2

是的，div 和 CSS 通常是放置 HTML 的更好、更簡單的方法。 有許多不同的方法可以做到這一點，這一切都取決於上下文。

例如，如果您想在文本右側放置一個圖像，您可以這樣做：

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

如果你想並排顯示多個項目，通常也首選浮動。例如：

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

只要您有水平空間，將這些圖像浮動到同一側就會彼此相鄰放置。

Answer 3

所有這些答案都可以追溯到 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/

Answer 4

這些天div是新的規范

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

Answer 5

display:inline呢？

<html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>

Answer 6

通常我這樣做：

<div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>

Answer 7

這取決於您想要做什么以及您正在顯示什么類型的數據/信息。 通常，表格保留用於顯示表格數據。

您的情況的替代方法是使用 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;” （或明確：正確，或明確：兩者）。

Answer 8

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會響應它，它可以幫助你！

Answer 9

嘗試在<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>

如何在不使用表格的情況下並排顯示項目？

問題描述

9 個解決方案

解決方案1
19 已采納 2012-07-11 18:29:35

解決方案2
8 2012-07-11 18:34:16

解決方案3
6 2018-11-08 21:18:30

解決方案4
3 2012-07-11 18:22:19

解決方案5
1 2012-07-11 18:23:18

解決方案6
1 2012-07-18 07:19:47

解決方案7
0 2012-07-11 18:31:57

解決方案8
0 2016-03-10 07:33:07

解決方案9
-1 2016-09-13 13:37:03

如何在不使用表格的情況下並排顯示項目？

問題描述

9 個解決方案

解決方案1 19 已采納 2012-07-11 18:29:35

解決方案2 8 2012-07-11 18:34:16

解決方案3 6 2018-11-08 21:18:30

解決方案4 3 2012-07-11 18:22:19

解決方案5 1 2012-07-11 18:23:18

解決方案6 1 2012-07-18 07:19:47

解決方案7 0 2012-07-11 18:31:57

解決方案8 0 2016-03-10 07:33:07

解決方案9 -1 2016-09-13 13:37:03

解決方案1
19 已采納 2012-07-11 18:29:35

解決方案2
8 2012-07-11 18:34:16

解決方案3
6 2018-11-08 21:18:30

解決方案4
3 2012-07-11 18:22:19

解決方案5
1 2012-07-11 18:23:18

解決方案6
1 2012-07-18 07:19:47

解決方案7
0 2012-07-11 18:31:57

解決方案8
0 2016-03-10 07:33:07

解決方案9
-1 2016-09-13 13:37:03