Текстовый Div и Image Div рядом на веб-сайте Parallax
Я делаю веб-сайт с параллаксом, и вверху страницы я хочу, чтобы слева был текст, а справа - изображение. На данный момент изображение отображается только под текстовым div.
.section {
width: 100%;
text-align: center;
padding: 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
}<section class = "section section-light">
<div class = "sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<img src = "resources/img/scene1image.png" alt = "scene1image.png">
</section>
Ответы 1
Если вы хотите, чтобы ваш текст был слева, а изображение справа, вам нужно создать один div, содержащий текст, и один div, содержащий изображение. Затем вы можете поместить оба из них в 1 div, чтобы содержать их оба (вложенные div) и установить inline-block для обоих внутренних div.
Затем вы можете установить оба внутренних блока на 50%, чтобы они составляли 100% ширины. Но так как у вас отступы (слева и справа) 80 пикселей, используйте calc(50%-80px), чтобы создать ширину 50% - 8 пикселей.
Попробуй это:
* {
padding: 0;
margin: 0;
}
.section {
width: 100%;
text-align: center;
padding: 50px 0 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img {
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img img {
width: 100%;
height: 80vh;
}<section class = "section section-light">
<div class = "sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<div class = "sub-section-img">
<img src = "http://lorempixel.com/200/200/" alt = "scene1image.png">
</div>
</section>Редактировать:
1) Добавлено новое правило CSS с vh. Теперь вы можете установить высоту изображения на точную высоту. Вы должны делать пробы и ошибки, чтобы соответствовать желаемому росту, просто увеличьте / уменьшите значение в height: 80vh.
2) Удалены отступы справа, так как вы хотите, чтобы изображение было на краю. Изменены значения в .section css.
3) Если вы не хотите абсолютно никакого пробела справа от изображения, добавьте сброс CSS (удаление отступов и полей по умолчанию).
* {
padding: 0;
margin: 0;
}
Что значит вровень с экраном? Вы имеете в виду отсутствие промежутков между изображением и верхним правым экраном?
Да :) так что высота текстовой части такая же, как у изображения, и нет пробелов с правой стороны между изображением и краем экрана.
Справа все еще будет небольшой зазор, так как мы не выполнили сброс CSS. Вы хотите, чтобы изображение было полностью до края без пробелов? или это нормально?
Все должно быть в порядке, если нет большого очевидного разрыва.
Хорошо, если вы не хотите этого небольшого пробела, добавьте сброс css, добавив это * {padding:0; margin: 0;}
на какой класс?
Это выглядит действительно хорошо, спасибо! И еще одна вещь, это нормально, если вы не хотите отвечать. Но текстовая часть начинается очень низко в разделе, есть идеи, почему это так?
Нет проблем, возможно, вы установили очень большую высоту изображения, и у вас недостаточно текста, чтобы покрыть ту же высоту. Почему бы вам не попробовать настроить изображение так, чтобы оно соответствовало высоте всего текстового блока?
Это очень близко к тому, что я хочу, только я хочу, чтобы верхняя и правая части изображения были на одном уровне с экраном.