0

我正在尝试创建一个看起来像这样的网页表格布局：

图片链接 http://kelostrada.pl/upload/test.png

我会很感激你的帮助。

我现在创建了类似的东西，它在 Firefox 中工作，但整个表格在 Chrome 和 Internet Explorer 中向下滑动：

<div style="width: 1000px;">

    <img src="lupa.png" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
    <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
        <tbody>
            <tr style="background-color: #6788bb;">
                <td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
                </td>
            </tr>
            <tr style="background-color: white;">
                <td style="padding: 20px;">
                    <div style="width: 200px; height: 100px; float: right"></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
                    <p>
                        Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

有没有人有任何建议我应该如何正确地完成我想要的结果？

如果你想要这里是网页，你可以在浏览器中测试它是如何工作的：http: //kelostrada.pl/upload/HtmlPage.html

4

2 回答 2

0

您需要使 div1000px;具有 aposition:relative;并且其中的img标签具有 aposition:absolute;而不是position:relative;

例如，此代码段来自您提供的链接。只需将其复制并粘贴到您的 HTML from <body>to</body>标记中即可。

这是相同的工作示例。

<body>
    <span class="test">TESTOWY NAPIS</span>
    <div style="width:1000px; position:relative;">
    <img src="lupa.png" style="z-index: 10; border-width: 0px; width:200px; top: 30px; right: 30px; position: absolute; float: right;"> <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <tbody>
        <tr style="background-color: #6788bb;">
            <td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
            </td>
        </tr>
        <tr style="background-color: white;">
            <td style="padding: 20px;">
                <div style="width:200px;height:100px;float:right"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
            <p>
                Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
            </p>
            </td>
        </tr>
    </tbody> </table>
        </div>

    </body>

我最后检查了相同的内容，并且效果很好。

希望这可以帮助。

于 2013-06-27T12:46:01.847 回答
0

I replaced every table element with divs. It looks fine to me.

jsfiddle

<div style="width: 1000px;">

<img src="http://placehold.it/200x200" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
<div style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <div style="background-color: #6788bb;">
            <div style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
            </div>
        </div>
        <div style="background-color: white;">
            <div style="padding: 20px;">
                <div style="width: 200px; height: 100px; float: right"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
                <p>
                    Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
                </p>
            </div>
        </div>
</div>

于 2013-06-27T12:52:46.373 回答