0

我有这个 HTML：

<div style="width: 100%;">
    <div style="float: left; width: 44%; display: inline;">
        <img width="95%" height="95%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
    </div>

    <div style="display: inline; float: left; width:54%>">

    </div>
</div>

<p>
Some text blah blah

请注意，第二个 div 中没有任何内容。这样做是在图像旁边的空间中显示第二个关闭 div 下方的文本。换句话说，它将它放在空 div 所在的空间中！

这个怎么可能？这是某种错误还是应该是这样的？

4

3 回答 3

2

float是 a block，而你试图display: inline在 a中使用block是不对的

尝试 ：

<div style="float: left; width: 44%; display: inline-block;">
于 2013-05-06T22:53:00.090 回答
1

您没有清除浮动，因此它们将继续浮动在其他内容旁边。对最外层的 div 应用明确的修复。添加overflow: hidden将起作用，但已过时。

http://jsfiddle.net/ExplosionPIlls/nNkJ8/

于 2013-05-06T22:53:57.923 回答
0

我真的不明白你要做什么:-)，但我看到了：

  • 在你的第二个 div: width:54%>" 它应该是 width:54%" （引号前没有大于符号）

  • floats 和 display:inline 不能相处。我会用这样的 display:inline-block 替换两者

    <div style="width: 44%; display: inline-block;">

  • 即使您的第二个 div 指定了“宽度”属性，如果您的 div 为空，它将以零宽度呈现。尝试添加“背景颜色：红色；” 以你的风格看我说什么。你应该什么也看不到。

  • 文本位于您的图像旁边，因为这就是 float 所做的。如果您想在图像下方绘制文本，您应该“清除”您的浮动。尝试这个：

    <p style="clear:both;"> 一些文字等等等等

如果您决定尝试“display:inline-block”，则不需要“clear:both”。

于 2013-05-06T23:08:20.283 回答