关于用CSS排版的实现。

Question

想实现图1的效果
使用了图2样式的代码
可是出来的是图3的效果

请教一下，使用哪种布局方式可以实现图一的显示效果呢？

图1

图2

图3

图2代码：

<div class="d_a_c" style="display: inline-block">
    <p style="float: left;margin-right: 10px;margin-bottom: 10px;font-size: 70px;color: #f5e327;font-family: '微软雅黑'">前</p>
    <img style="float:right;margin-top: 150px;" src="Images/task_1_6_1_3.png" height="309" width="195">
    <p style="position:relative; font-size: 12px;color: #767777;font-family: '宋体';">很长的文字</p>
</div>

Answer 1

margin-top: 150px;

这一句把空间占用了，你可以试试

position: relative;
top: 150px;

这个问题有点难搞。普通盒模型好像比较难实现图片下移而不占用顶部空间：

• 使用绝对定位，图片会遮挡住文字，而不占据空间。

• 相对定位，无法使图片占据的空间下移，只能使显示的位置下移。

以上源码：

<div style="width: 60%;margin: 0 auto;background: #eee;position: relative;">
    <p style="
    float: left;
    margin: auto 10px;
    font-size: 70px;
    color: #f5e327;
    font-family: '微软雅黑'">
        前
    </p>

    <img style="position: relative;float:right;top: 50px;background: #fff;margin-bottom: 50px;"
    src="Images/task_1_6_1_3.png" height="150" width="150"/>

    <p style="
    font-size: 12px;
    color: #767777;
    font-family: '宋体';">
    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
    </p>

</div>

Answer 2

你的margintop占用了从上到下的150px的空间。你需要对你的div进行相对定位即可。

Answer 3

两个绝对定位试试，父容器相对定位包裹