Question

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

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

Answer 2

尝试

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

简单的HTML属性：

align="left"

属性的其他值：

底
左
中间
右
顶

Answer 3

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

Answer 4

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

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

干杯！快乐编码

Answer 5

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

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

如果没有，请尝试：

float:right;

float:left;

或 display: inline代替inline-block

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

Answer 6

尝试

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

它对我有用

Answer 7

方法一：

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

Answer 8

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

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

Answer 9

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

Answer 10

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

{
    "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
    "title": "One or more validation errors occurred.",
    "status": 400,
    "traceId": "|f5f5b1a2-4dd202e6998784c3.",
    "errors": {
        "Name": [
            "'Name' is required."
        ],
        "Content": [
            "'Content' is required."
        ]
    }
}

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

Answer 11

来自another answer：

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

演示：

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

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

11 个答案: