Html 在不使用 div 宽度的情况下在同一行上对齐图像和一些文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11713176/
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
align an image and some text on the same line without using div width?
提问by Maria
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
好的，所以我正在尝试将图像（包含在 div 中）和一些文本（也包含在 div 中）对齐在同一行上，而不设置文本的宽度，我该怎么做？这是我到目前为止。
<div id="container">
<div id="image" style="float:left;">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
</div>
When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
文字短时，图片和文字可以放在同一行，但是我的文字很长，自动跳到图片下方的另一行。
Basically, now it's this: http://puu.sh/MPw2I want to make this: http://puu.sh/MPvr
基本上，现在是这样的：http: //puu.sh/MPw2我想做这个：http: //puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
我一直在尝试解决这个问题大约 3 个小时，我是菜鸟，请帮忙？:S
回答by Paul Fleming
Floating will result in wrapping if space is not available.
如果空间不可用，浮动将导致换行。
You can use display:inlineand white-space:nowrapto achieve this. Fiddle
您可以使用display:inline和white-space:nowrap来实现这一点。小提琴
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<img src="tree.png"/>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
A very long text(about 300 words)
</div>
</div>?
回答by Hitesh Modha
Try
尝试
<img src="assets/img/logo.png" align="left" />
Text Goes here
Simple HTML Attribute:
简单的 HTML 属性：
align="left"
Other values for attribute:
属性的其他值：
- bottom
- left
- middle
- right
- top
- 底部
- 剩下
- 中间
- 对
- 最佳
回答by Suyash Doneria
I know this question is over 6 years old, but still, I would like to share my method using tables and this won't require any CSS.
我知道这个问题已经超过 6 年了，但我仍然想分享我使用表格的方法，这不需要任何 CSS。
<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>
Cheers! Happy Coding
干杯! 快乐编码
回答by Greg9Strat
To get the desired effect, you should place the image tag inside the same div as your text. Then set the float: leftattribute on the image. Hope this helps!
要获得所需的效果，您应该将图像标签放在与文本相同的 div 中。然后float: left在图像上设置属性。希望这可以帮助！
回答by Greg9Strat
I was working on a different project when I saw this question, this is the solution I used and it seems to work.
当我看到这个问题时，我正在做一个不同的项目，这是我使用的解决方案，它似乎有效。
#[image id] , p {
vertical-align: middle;
display: inline-block;
}
if it doesn't, just try :
如果没有，请尝试：
float:right;
float:left;
or
display: inlineinstead of inline-block
或
display: inline代替inline-block
This worked for me, hope this helped!
这对我有用，希望这有帮助！
回答by Hafiz Ahmed
Try
尝试
<p>Click on <img src="/storage/help/button2.1.png" width="auto"
height="28"align="middle"/> button will show a page as bellow</p>
It works for me
这个对我有用
回答by John Moore
I built on the last answer and used display:tablefor an outer div, and display:table-cellfor inner divs.
我建立在最后一个答案的基础上，用于display:table外部 div 和display:table-cell内部 div。
This was the only thing that worked for me using CSS.
这是使用 CSS 对我有用的唯一方法。
回答by Hannah G.
Just set the img css to be display:inlineor display:inline-block
只需将 img css 设置为display:inline或display:inline-block
回答by bob marti
Method1:
方法一：
Inline elements do not use any width or height you specify. To avoid two div and use like this:
内联元素不使用您指定的任何宽度或高度。为了避免两个 div 并像这样使用：
<div id="container">
<img src="tree.png" align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
Method2:
方法二：
Change your CSS as follows
更改您的 CSS 如下
.container div {
display: inline-block;
}
Method3:
方法三：
It is the simple method set width Try the following css:
这是设置宽度的简单方法尝试以下css：
.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts {
height: auto;
width: 30%;
display: inline;
}
