在不使用 div 宽度的情况下将图像和一些文本对齐在同一行？

Posted 2023-03-05

【中文标题】在不使用 div 宽度的情况下将图像和一些文本对齐在同一行？

【英文标题】：align an image and some text on the same line without using div width?

【发布时间】：2012-07-27 15:06:45

【问题描述】：

好的，所以我试图将图像（包含在 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>

文字短时，图片和文字可以放在同一行，但我的文字很长，会自动跳到图片下方的另一行。

基本上，现在是这样的：http://puu.sh/MPw2 我想做这个：http://puu.sh/MPvr

我已经尝试解决这个问题 3 个小时了，我太菜鸟了，请帮忙？ :S

【问题讨论】：

我不清楚您要做什么。我认为您应该尝试为您的两个 div 设置新样式。尝试：“显示：内联；”。你使用内联样式只是为了问你的问题，或者你也在你的项目中这样做？另外，我不太确定您是否真的想为“图像”和“文本”使用“id”而不是“类”。

基本上，现在是这个：puu.sh/MPw2我想做这个：puu.sh/MPvr

好的，所以你必须为你的#image添加一个宽度，为你的#texts添加一个宽度......你可以尝试向它们中的每一个添加如下内容：“width：30％; "，只是一个例子。由于您的 div 没有宽度并且它们是“块”元素，因此每个元素都使用 100% 的现有宽度，即使您“浮动”它们，它们也会位于另一个下方。

是的，我尝试过使用宽度，但如何在不使用宽​​度的情况下使其工作？ :S 因为我试图让它在 iPhone 上工作，一旦我设置了一些宽度，在 iphone 上（因为屏幕很薄）将看不到整个文本

你在 iphone 上有固定的宽度，所以你也可以在那里设置固定的宽度。想象一下 iphone 的宽度为 960x640px。您可以将 #container 设置为 width: 640px;你的#image到宽度：300px；和你的#texts宽度：300px;这将起作用。

【参考方案1】：

如果空间不可用，浮动将导致环绕。

您可以使用display:inline 和white-space:nowrap 来实现此目的。 Fiddle

<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>​

【讨论】：

@user1561559。 It is working for me 在 IE9、FF14、Safari 5.1.1、Chrome 20 中。哪里不适合你？

好吧，当文字很长的时候，比如300字什么的，文字会超出屏幕宽度，那我就得横向滚动才能看到整个文字了

在 2018 年仍然表现出色；应该是公认的答案。

【参考方案2】：

试试

<img src="assets/img/logo.png" align="left" />
Text Goes here

简单的 html 属性：

align="left"

属性的其他值：

底部 左 中间 对 顶部

【参考方案3】：

我知道这个问题已经超过 6 年了，但我仍然想分享我使用表格的方法，这不需要任何 CSS。

<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>

干杯！ 快乐编码

【讨论】：

我们不应该在 2018 年使用表格来显示表格数据以外的任何内容！

【参考方案4】：

要获得所需的效果，您应该将图像标签放置在与文本相同的 div 中。然后在图像上设置float: left 属性。希望这会有所帮助！

【参考方案5】：

当我看到这个问题时，我正在做一个不同的项目，这是我使用的解决方案，它似乎有效。

#[image id] , p 
        vertical-align: middle;
        display: inline-block;
    

如果没有，请尝试：

float:right;

float:left;

或 display: inline 而不是 inline-block

这对我有用，希望这有帮助！

【参考方案6】：

方法一：

内联元素不使用您指定的任何宽度或高度。 为了避免两个 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>

方法二：

如下更改你的 CSS

.container div 
    display: inline-block;
    

方法3：

设置宽度的简单方法 试试下面的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;

【参考方案7】：

试试

<p>Click on <img src="/storage/help/button2.1.png"  
align="middle"/> button will show a page as bellow</p>

对我有用

【讨论】：

宽度、高度和对齐参数已过时。

【参考方案8】：

我在最后一个答案的基础上使用display:table 用于外部 div，display:table-cell 用于内部 div。

这是使用 CSS 唯一对我有用的东西。

【参考方案9】：

只需将img css设置为display:inline或display:inline-block

【参考方案10】：

你写了一个不必要的div，就这样吧

<div id="texts" style="white-space:nowrap;">
     <img src="tree.png"  align="left"/>
     A very long text(about 300 words) 
</div>

你正在寻找的是 white-space:nowrap;这段代码可以解决问题。

【参考方案11】：

来自another answer：

<table>
<tr style="background-color:white">
    <th><b>To solve your doubts &ensp; &nbsp;</b></th>
    <th><img src="https://***.design/assets/img/logos/so/logo-***.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
    <th><b>&ensp; has the requisite clout.</b></th>
</tr>
</table>

演示：

:D 有点俗气，但我想，为什么不呢。