Newb ie снова здесь. У меня есть это письмо, и мне нравится, как все выглядит, но у меня есть два вопроса, на которые я надеюсь, кто-нибудь сможет ответить.
Первый - когда я открываю эту страницу в Google Chrome и регулирую ширину окна. , ничего не меняется. Он вообще не кажется отзывчивым. Так что в моем коде что-то не хватает. Я знаю, что это действительно общая c проблема, но мне нужна помощь. Я хочу, чтобы таблица шириной 600 пикселей имела такую ширину до тех пор, пока ширина окна или устройства не станет меньше 600 пикселей, после чего я хочу, чтобы таблица шириной 600 пикселей была плавной.
Второе - в случае изображений A или B , Я заметил, что он не отцентрирован по вертикали. Изначально я хотел, чтобы он находился в верхней части контейнера, в котором он находится, но теперь я хотел бы, чтобы он был выровнен по вертикали с равным пространством сверху и снизу. Будь то текст рядом с ним или изображение, что было бы правильным способом сделать это? Я пробовал выравнивать по вертикали и не могу заставить его работать.
РЕДАКТИРОВАТЬ: Если это поможет, я откажусь от учений, которые я читаю в «Лучшем письме по дизайну» Джейсона Родригес.
Еще раз ценю вашу мудрость!
https://codepen.io/chaser87/pen/ExPNRNN
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {width: 100% !important;}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>