Html 如何在不使用表格的情况下并排显示项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11438910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display items side-by-side without using tables?
提问by IMB
For example you want to display an image beside a text, usually I would do this:
例如，您想在文本旁边显示图像，通常我会这样做：
<table>
<tr>
<td><img ...></td>
<td>text</td>
</tr>
</table>
Is there a better alternative?
有更好的选择吗？
回答by Neil McGuigan
You should floatthem inside a container that is cleared.
您应该将它们漂浮在已清除的容器内。
Example:
例子：
https://jsfiddle.net/W74Z8/504/
https://jsfiddle.net/W74Z8/504/
A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:
一个干净的实现是“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;
}
?
回答by Pjottur
Yes, divs and CSS are usually a better and easier way to place your HTML. There are many different ways to do this and it all depends on the context.
是的，div 和 CSS 通常是放置 HTML 的更好、更简单的方法。有许多不同的方法可以做到这一点，这一切都取决于上下文。
For instance, if you want to place an image to the right of your text, you could do it like so:
例如，如果您想在文本右侧放置一个图像，您可以这样做：
<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>
And if you want to display multiple items side by side, float is also usually preferred.For example:
如果你想并排显示多个项目，通常也首选浮动。 例如：
<div>
<img src="image1.png" style="float: left;" />
<img src="image2.png" style="float: left;" />
<img src="image3.png" style="float: left;" />
</div>
Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space.
只要您有水平空间，将这些图像浮动到同一侧就会彼此相邻放置。
回答by dreamerkumar
these days div is the new norm
这些天div是新的规范
<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
回答by Joseph Cho
All these answers date back to 2016 or earlier... There's a new web standard for this using flex-boxes. In general floatsfor these sorts of problems is now frowned upon.
所有这些问题的答案可以追溯到2016年或更早的...有这个使用新的网络标准flex-boxes。总的来说floats，这些问题现在是不受欢迎的。
HTML
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS
CSS
.image-txt-container {
display:flex;
align-items:center;
flex-direction: row;
}
Example fiddle: https://jsfiddle.net/r8zgokeb/1/
小提琴示例：https: //jsfiddle.net/r8zgokeb/1/
回答by Skovy
What about display:inline?
怎么样display:inline？
<html>
<img src='#' style='display:inline;'/>
<p style='display:inline;'> Some text </p>
</html>
回答by Anita Sharma
Usually I do this:
通常我这样做：
<div>
<p>
<img src='1.jpg' align='left' />
Text Here
<p>
</div>
回答by chaofeis
The negative marginwould help a lot!
这negative margin将有很大帮助！
The html DOM looks like below:
html DOM 如下所示：
<div class="main">
<div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>
And the CSS:
和 CSS：
.main {
float:left;
width:100%;
}
.main_body{
margin-left:210px;
height:200px;
}
.left{
float:left;
width:200px;
height:200px;
margin-left:-100%;
}
The main_bodywill responsive it's with, may it helps you!
随心所欲的main_body意志，希望对你有帮助！
回答by nexus-bytes
It depends on what you want to do and what type of data/information you are displaying. In general, tables are reserved for displaying tabular data.
这取决于您想要做什么以及您正在显示什么类型的数据/信息。通常，表格保留用于显示表格数据。
An alternate for your situation would be to use css. A simple option would be to float your image and give it a margin:
您的情况的替代方法是使用 css。一个简单的选择是浮动您的图像并给它一个边距：
<p>
<img style="float: left; margin: 5px;" ... />
Text goes here...
</p>
This would cause the text to wrap around the image. If you don't want the text to wrap around the image, put the text in a separate container:
这将导致文本环绕图像。如果您不希望文本环绕图像，请将文本放在单独的容器中：
<div>
<img style="float: left; margin: ...;" ... />
<p style="float: right;">Text goes here...</p>
</div>
Note that it may be necessary to assign a width to the paragraph tag to display the way you'd like. Also note, for elements that appear below floated elements, you may need to add the style "clear: left;" (or clear: right, or clear: both).
请注意，可能需要为段落标记指定宽度以按您喜欢的方式显示。另请注意，对于出现在浮动元素下方的元素，您可能需要添加样式“clear: left;” （或明确：正确，或明确：两者）。
回答by Brad L.
Try calling the image in a <DIV>tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV>tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.
尝试在<DIV>标签中调用图像，这将允许更流畅和更快的加载时间。请注意，因为这是一个背景图像，您还可以在<DIV></DIV>标签之间的图像上放置文本。这也适用于自定义商店/商店列表……发布一个很酷的“售罄！”叠加层，或者您可能想要的任何内容。
Here is the pic/text- sided by side version, which can be used for blog post and article listing:
这是图片/文本并排版本，可用于博客文章和文章列表：
<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>
