Изображение с частичным переполнением текста с использованием css - PullRequest
Новая
       16

Изображение с частичным переполнением текста с использованием css

0 голосов
/ 02 марта 2020

Я пытаюсь добиться следующего результата -

enter image description here

Но возникают проблемы с частичным перекрытием в нижней части каждого числа пи c. Я могу выделить их (см. Код в конце этого поста). Я могу поместить отрицательное поле в элемент div, который находится под изображениями, но он помещает текст на изображение без белого фона, покрывающего изображение.

Пара ограничений - с инструментом, с которым я работаю, я должен придерживаться встроенного css, без сетки или flexbox. И он должен быть отзывчивым, то есть работать с изменением размера браузера (поэтому, вероятно, предоставление фиксированной высоты и ширины в пикселях не сработает).

То, что у меня есть ниже, хорошо работает, когда идет отзывчивость. Но не в состоянии добиться этого частичного перекрытия наряду с белым фоном. Вот что у меня есть 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="overflow: auto">
        <img src="images/SIFT_Video.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
        <img src="images/SIFT_User_Guide.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
    </div>
    <div style="clear: both"></div>
    <div>
        <table style="table-layout: fixed ; width:100%">
            <tr>
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">SIFT Video</td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">User Guide</td>
                <td style="width:2%"></td>
            </tr>
            <tr >
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>SIFT Interview Demo</h3></td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
                <td style="width:2%"></td>
            </tr>
        </table>
    </div>
</body>
</html>

1 Ответ

1 голос
/ 02 марта 2020

Предлагая вам go с <div> подходом. Вот решение из вашего текущего подхода. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="overflow: auto">
        <img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
        <img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
    </div>
    <div style="clear: both"></div>
    <div style="position:relative;  top: -20px;">
        <table style="table-layout: fixed ; width:100%;">
            <tr>
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">SIFT Video</td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">User Guide</td>
                <td style="width:2%"></td>
            </tr>
            <tr >
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97;"><h3>SIFT Interview Demo</h3></td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
                <td style="width:2%"></td>
            </tr>
        </table>
    </div>
</body>
</html>
...