两个列文本，在HTML / CSS / PHP的顶部中间有一个图像

Question

我有一个两列（基于表格）的PHP生成的HTML页面 我需要添加一个图像＆amp;在它下面的标题是这样的顶部中间：

我如何使用html css实现这一点（如果需要，也可以是php）？

由于

Answer 1

嗯，这篇ALA文章很老了，但它似乎特别适合你的情况。
Cross-Column Pull-Outs
让我知道它是否有帮助！

Answer 2

你可以尝试一下CSS技巧，如（所有地方）csstricks.com所示。它似乎完全符合你的要求。

<强> HTML ：

<div id="page-wrap">
    <img src="http://placekitten.com/250/250" id="logo" />
    <div id="l">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
        eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit 
        amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum 
        sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt 
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, 
        neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna 
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 
        porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
        eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit 
        amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum 
        sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt 
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, 
        neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna 
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 
        porttitor, facilisis luctus, metus</p>
    </div>
    <div id="r">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
        eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit 
        amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum 
        sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt 
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, 
        neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna 
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 
        porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 
        eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit 
        amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum 
        sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt 
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, 
        neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna 
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 
        porttitor, facilisis luctus, metus</p>
    </div>
</div>

<强> CSS ：

#page-wrap {
    width: 60%;
    margin: 80px auto;
    position: relative;
}
#logo {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l, #r {
    width: 49%;
}
#l {
    float: left;
}
#r {
    float: right;
}
#l:before, #r:before {
    content: "";
    width: 125px;
    height: 250px;
}
#l:before {
    float: right;
}
#r:before {
    float: left;
}