Question

<div>
        <div style="width:100%;">
            <div style="float:left;width:25%;height:100%;">
                <h1>XP: 15795</h1>
                <h1>Nivel: 15</h1>
            </div>
            <div style="width:50%">
                <h1>Image</h1>
            </div>
            <div style="float:right;width:25%">
                <h1 align="right">523<img src="http://i.imgur.com/1hw2bog.png" height="100%" width="72px"/></h1>
            </div>
        </div>
    </div>

这是我创建div的代码，下图是我从MVC编辑器中看到的内容。提前致谢 http://i.stack.imgur.com/Mn6b6.png

Answer 1

更改了div和工作代码的位置：

<div style="width:100%;">
        <div style="float:left;width:25%;">
            <h1>XP: 15795</h1>
            <h1>Nivel: 15</h1>
        </div>
         <div style="float:right;width:25%;">
            <h1 align="right">523<img src="http://i.imgur.com/1hw2bog.png" height="100%" width="72px"/></h1>
        </div>
        <div style="width:50%;">
            <h1>Image</h1>
        </div>
    </div>

Answer 2

检查整个元素的大小。请记住，大小是边距，填充和内部元素的实际大小的总和。 div进入该位置是因为被其他元素边缘推动。

您可以添加一个容器来容纳顶部的所有元素，并将其添加display: inline;以使它们堆叠在同一行中。然后将相对定位的“Nivel：15”块定位。

<div>
    <div style="display: inline-block;">
        <div style="float: left;"><h1>XP: 15795</h1></div>
        <div style="float: left;"><h1>Image</h1></div>
    </div>
    <div style="float: right;">
        <h1>523<img src="http://i.imgur.com/1hw2bog.png" height="100%" width="72px"/></h1>
    </div>
    <div style="clear: both;">
        <div><h1>Nivel: 15</h1></div>
    </div>
</div>

这个结构应该可以帮助你制作这样的布局（我还建议降低图像的大小，因为这也是增加div高度的原因）

Div陷入错误的位置

2 个答案: