HTML, фото и текст

75
10

Мне нужно написать текст на левой стороне экрана, а справа от него мне нужны изображения. Я использовал код, который помещает текст между двумя изображениями сбоку, я хочу, чтобы текст был сверху, вот мой код:

<table width="1400" height="10">
<tr height="10px">
<td align="left">
<p style="color:lime; width:50%">
Text
</p>
</td>
<td align="right">
<p style="color:Lime; width:50%">
The next link will send u to the "transfer Market" page
</p>
<a href="https://www.transfermarkt.co.uk/lionel-messi/profil/spieler/28003" targer="_blank">The Page</a>
<br />
<img src="pics/pic4.jpg" />
<br />
<img src="pics/pic6.jpg" />
</td>
</tr>
</table>

спросил(а) 2019-02-05T11:59:00+03:00 10 месяцев назад
2
Решение
-3

Как упоминалось в комментариях, таблицы не лучший выбор для макета. Есть много других способов сделать это, включая flexbox, сетки или даже старые добрые поплавки.

Просто чтобы дать вам пример с поплавками:

    
.wrapper::after {
content:'';
display: table;
clear: both;
}

.left, .right {
display: block:
position: relative;
width: 50%;
float: left;
}
<div class="wrapper">
<div class="left">
<p>Some text</p>
</div>
<div class="right">
<p>The next link will send u to the "transfer Market" page</p>
<img src="pics/pic4.jpg" />
<img src="pics/pic6.jpg" />
</div>
</div>

Я также добавил clear: both в обертку, чтобы следующее содержимое не перепутывалось поплавками.

ответил(а) 2019-02-05T12:47:00+03:00 10 месяцев назад
Еще 1 ответ
-3

Попробуйте использовать код ниже:

.containt-holder {
max-width: 1200px;
margin: 0 auto;
}

.left-area {
width: 50%;
float: left;
}

.right-area {
width: 50%;
float: left;
}

<div class="containt-holder">
<div class="left-area">Text</div>
<div class="right-area">
<p> The next link will send u to the "transfer Market" page</p>
<a href="https://www.transfermarkt.co.uk/lionel-messi/profil/spieler/28003" targer="_blank">The Page</a>
<br />
<img src="pics/pic4.jpg" />
<br />
<img src="pics/pic6.jpg" />
</div>
</div>

ответил(а) 2019-02-05T12:24:00+03:00 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема