Это то, что вы пытаетесь достичь?
<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
<div style="flex: 0 0 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
</div>
<div>
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Ключевые моменты:
flex-basis: 150px; flex-grow: 0;
на контейнере изображений width: 100%;
на <img>
flex-wrap: wrap
из общей оболочки (что приведет к падению второго div). align-items: center
в обертку, чтобы выровнять гибкие элементы по вертикали Вы не можете точно подобрать их высоту, так как вы заметите, что второй div существенно различается по высоте при различной ширине страницы, но вы можете выровнять их по вертикали. Теперь, самая большая проблема с тем, что вы пытаетесь сделать (это встроенный стиль), заключается в том, что он не может быть отзывчивым , потому что вы не можете применить @media
запросов с помощью встроенные стили. Однако вы можете использовать теги <style>
внутри <body>
. Пример:
<style type=text/css>
.wrapper {
padding: 25px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
background-color: #bcc0c6;
}
.wrapper> :first-child {
flex: 0 0 200px;
}
.wrapper> :first-child img {
width: 100%;
}
.wrapper> :nth-child(2) {
padding: 0 0 0 25px;
}
.wrapper> :nth-child(2)>span {
font-weight: bold;
font-size: 24px;
}
@media (max-width: 700px) {
.wrapper {
flex-wrap: wrap;
}
.wrapper> :first-child {
margin: 0 auto;
}
}
</style>
<div class="wrapper">
<div>
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div>
<span>I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Для этого вы должны иметь возможность использовать несколько элементов управления загрузкой в Google. Некоторые из них находятся на этой странице загрузки .
Еще одно решение - попросить ваших клиентов установить плагин Firefox FTP или написать плагин Firefox самостоятельно, но FTP - это, безусловно, самый простой способ загрузки.
Что не так с FTP? Протокол поддерживает возможность многократного использования, а клиентов очень много.
На стороне клиента прошивка; На стороне сервера, что угодно (это не имело бы никакого значения).
Никаких существующих технологий (кроме использования FTP или чего-то еще).