Как я могу расположить изображения так, чтобы они перекрывали таблицу с помощью HTML? - PullRequest
Новая
       30

Как я могу расположить изображения так, чтобы они перекрывали таблицу с помощью HTML?

0 голосов
/ 20 мая 2019

У меня есть изображение, плавающее справа от текста, и таблица под текстом.Однако таблица отталкивается от изображения.Как мне организовать таблицу так, чтобы она появлялась под текстом, не влияя на размещение изображения?

Я пытался использовать относительные и абсолютные деления, но не нашел удовлетворительного ответа. 

<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
    <h3>beyondblue</h3>
    <p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
    <table style="width: 0px;">
    <colgroup><col><col></colgroup>
    <tbody>
        <tr>
            <td><b>Website</b></td>
            <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
        </tr>
        <tr>
            <td><b>Phone numbers</b></td>
            <td><p><b>Support</b>: <a href="tel:1300224636">1300 22 46 36</a>
            <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
            <br><b>Suicide Callback Service</b>: <a href="tel:1300659467">1300 659 467</a></p>
            <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
        </tr>
        <tr>
            <td><b>Other services</b></td>
            <td>
            <ul>
                <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
                <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
            </ul>
            </td>
        </tr>
    </tbody>
    </table>

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Я добавил стиль css, изменил положение на относительное и тег <div> для получения желаемого результата: 

<style>
    .overlap{
    position: relative;
    top: -60px
 }
</style>

<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
<h3>beyondblue</h3>
<p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
<div class="overlap">
<table style="width: 0px;">
<colgroup><col><col></colgroup>
<tbody>
    <tr>
        <td><b>Website</b></td>
        <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
    </tr>
    <tr>
        <td><b>Phone numbers</b></td>
        <td><p><b>Support</b>: <a href="tel:1300224636">1300 22 46 36</a>
        <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
        <br><b>Suicide Callback Service</b>: <a href="tel:1300659467">1300 659 467</a></p>
        <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
    </tr>
    <tr>
        <td><b>Other services</b></td>
        <td>
        <ul>
            <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
            <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
        </ul>
        </td>
    </tr>
</tbody>
</table>
</div>
0 голосов
/ 20 мая 2019

это ты так хочешь? 

.overlap{
    position: absolute;
    top:20px;
    left:20px;
}
<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
<div class="overlap">
<h3>beyondblue</h3>
<p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
<table style="width: 0px;">
<colgroup><col><col></colgroup>
<tbody>
    <tr>
        <td><b>Website</b></td>
        <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
    </tr>
    <tr>
        <td><b>Phone numbers</b></td>
        <td><p><b>Support</b>: <a href="tel:1300224636">1300 22 46 36</a>
        <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
        <br><b>Suicide Callback Service</b>: <a href="tel:1300659467">1300 659 467</a></p>
        <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
    </tr>
    <tr>
        <td><b>Other services</b></td>
        <td>
        <ul>
            <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
            <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
        </ul>
        </td>
    </tr>
</tbody>
</table>
</div>
...