26

好的，所以我试图在同一行上对齐图像（包含在 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

4

11 回答 11

29

如果空间不可用，浮动将导致换行。

您可以使用display:inlineandwhite-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>​
于 2012-07-29T21:42:47.397 回答
15

尝试

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

简单的 HTML 属性：

align="left"

其他属性值：

  • 底部
  • 剩下
  • 中间
  • 正确的
  • 最佳
于 2014-04-29T09:27:08.203 回答
5

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

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

干杯! 快乐编码

于 2018-03-06T09:29:36.987 回答
4

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

于 2012-07-30T00:32:49.790 回答
4

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

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

如果没有，请尝试：

float:right;

float:left;

或 display: inline代替inline-block

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

于 2016-05-22T18:07:05.953 回答
1

尝试

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

这个对我有用

于 2017-11-30T04:35:29.977 回答
1

方法1：

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

方法2：

改变你的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;
}
于 2017-01-30T12:52:18.173 回答
0

你写了一个不必要的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; 这段代码可以解决问题。

于 2020-12-30T14:52:15.330 回答
0

从另一个答案：

<table>
<tr style="background-color:white">
    <th><b>To solve your doubts &ensp; &nbsp;</b></th>
    <th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.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>

演示： 在此处输入图像描述

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

于 2021-03-04T15:00:34.173 回答
0

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

于 2020-05-07T00:02:07.373 回答
0

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

这是使用 CSS 对我有用的唯一方法。

于 2018-06-22T18:17:45.157 回答