Выравнивание картинки по правому краю html: html — Как отобразить справа картинку и слева блок?

Leave a Comment / Html / By /

html — Как сделать выравнивание картинок по нижнему краю и прижать их к тексту?

Вопрос задан

Изменён 1 месяц назад

Просмотрен 2k раз

Добрый день! Есть div следующего вида:

.wrapper,
.wrapper ul {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
<div>
  <ul>
    <li>
      <div><img src="/img/inf/1.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/2.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/3.
 
 png" /></div>
      <p>Lorem ipsum</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

Как выровнять картинки по нижнему краю и прижать их к тексту?

  • html
  • css
  • css3

1

У li задайте:

.wrapper ul li{
  display:inline-block;
}

Отступ идет от элемента p. Чтобы убрать его:

.wrapper ul li p{
  margin-top:0;
}

.wrapper,
.wrapper ul {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
.wrapper ul li{
  display:inline-block;
}
.wrapper ul li p{
  margin-top:0;
}
<div>
  <ul>
    <li>
      <div><img src="/img/inf/1.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/2.
  png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/3.png" /></div>
      <p>Lorem ipsum</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

Решение с применением flexbox:

.wrapper,
.wrapper ul {
  display:flex;
  justify-content:center;
}
.wrapper ul li{
  list-style: none;
  padding: 0 5px;
}
<div>
  <ul>
    <li>
      <div><img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3057.jpg" /></div>
      <p>сложность</p>
    </li>

    <li>
      <div><img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058_1.jpg" /></div>
      <p>не в выборе</p>
    </li>

    <li>
      <div><img src="https://dreamgold.
 
 ua/image/catalog/lazyrite/souvenirs/3057_1.jpg" /></div>
      <p>а в количестве вариантов</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Выравнивание по краю экрана в Bootstrap

Здравствуйте!

Недавно начал знакомство с Bootstrap и столкнулся с ситуацией, где в div’е размещается 2 блока: один с текстом, другой с изображением.

Но загвоздка в том, что изображение должно прилипать не к краю контейнера, а к краю экрана. На просторах сети такого решения найти не смог, к сожалению.

Как это можно логичнее реализовать?

Макет:

Я делал это как-то так:

.collections-grey {
  background-color: #f6f6f6;
}
.collections-text-left {
  float: left;
}
.collections-text-right {
  float: right;
}
.collections-image-right {
  float: right;
}
.collections-image-left {
  float: left;
}
.collections-image-right img {
  width: 100%;
}
.collections-white {
  background-color: #fff;
}
<section>
  <div>
    <div>
      <div>
        <div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  
          </div>
          <!--collections-text-left-->
          <div>
            <img src="images/clips.png">
          </div>
          <!--collections-image-right-->
          <div></div>
        </div>
        <!--col-md-12-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--collections-grey-->
</section>

Сразу прошу извинить за, вероятно, кривое сообщение, чукча только учится)

  • html
  • css
  • вёрстка
  • bootstrap
  • адаптивная-верстка

2

Решение по вашему вопросу:

.section-with-image {
  min-height: 150px;
  position: relative;
}

@media (max-width: 479px) {
  .section-with-image > img {
    height: auto;
    width: 100%;
  }
}

@media (min-width: 480px) {
  . section-with-image > img {
    height: 100%;
    position: absolute;
    top: 0;
    width: auto;
  }  

  .section-with-image > .img-left {
    left: 0;
  }

  .section-with-image > .img-right {
    right: 0;
  }
}

.section-with-image h3,
.section-with-image p {
  text-transform: uppercase;
}

.section-with-image a {
  margin: 40px 0;
}

.section-grey {
  background-color: #f6f6f6;
}

.section-white {
  background-color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<section>
  <img
       src="http://i.gyazo.com/650a46387fa5db34470afd0a8984bd0b.png"
      
      
       alt="Clips"/>
  <div>
    <div>
      <div>
        <h3>Clips</h3>
        <p>Коллекция весна-лето 2016</p>
        <a href="#">Смотреть</a>
      </div>
    </div>
  </div>
</section>
<section>
  <img
       src="http://i.
 
 gyazo.com/4395a87eccc44866a1d4667e68735cba.png"
      
      
       alt="Brunella"/>
  <div>
    <div>
      <div>
        <h3>Brunella</h3> 
        <p>Коллекция весна 2016</p>
        <a href="#">Смотреть</a>
      </div>
    </div>
  </div>
</section>
<section>
  <img
       src="http://i.gyazo.com/650a46387fa5db34470afd0a8984bd0b.png"
      
      
       alt="Clips"/>
  <div>
    <div>
      <div>
        <h3>Clips</h3>
        <p>Коллекция весна-лето 2016</p>
        <a href="#">Смотреть</a>
      </div>
    </div>
  </div>
</section>

Или посмотреть код на jsfiddle

Судя по вашим скриншотам — текст должен был прилеплен к краям контейнера. Это важное условие, так как в таком случае использовать . container-fluid уже не удастся. Однако можно использовать .container для контента, и абсолютное позиционирование по секции для изображения.

@media (min-width: 480px) {
  .section-with-image > img {
    height: 100%;
    position: absolute;
    top: 0;
    width: auto;
  }  
  .section-with-image > .img-left {
    left: 0;
  }
  .section-with-image > .img-right {
    right: 0;
  }
}

Обратите внимание на @media запрос — на узких экранах, чтобы контент не наслаивался на изображение — мы располагаем изображение над контентом:

@media (max-width: 479px) {
  .section-with-image > img {
    height: auto;
    width: 100%;
  }
}

В некоторых ситуациях решается так:

.slideInRight{
   position: absolute;
   width: N%;
   right: 0;
}

дальше уже с учетом занчения width можно изменить размер внутри контейнера, марджинами изменить высоту если надо.

Бутстрап предлагает иерархию Контейнер > Ряды > Столбцы. Можно взять её за основу и сделать, например, так:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<style>
  .collections-grey {
    background-color: #f6f6f6;
  }
  .collections-white {
    background-color: #fff;
  }
  .collections-image-left,
  .collections-image-right,
  .collections-text-left,
  .collections-text-right {
    padding: 0;
  }
  .collections-image-right,
  .collections-text-right {
    text-align: right;
  }
  .collections img {
    height: auto;
    max-width: 100%;
  }
</style>

<section>
  <div>
    <div>
      <div>
        <h3>CLIPS</h3> 
      </div><!--col-->
      <div>
        <img src="https://i. gyazo.com/650a46387fa5db34470afd0a8984bd0b.png" alt="CLIPS">
      </div><!--col-->
    </div><!--row-->
    <div>
      <div>
        <img src="https://i.gyazo.com/4395a87eccc44866a1d4667e68735cba.png" alt="BRUNELLA">
      </div><!--col-->
      <div>
        <h3>BRUNELLA</h3> 
      </div><!--col-->
    </div><!--row-->
  </div><!--container-fluid-->
</section>

  1. используйте не .container класс, а .container-fluid.

  2. добавьте css свойство:

     .collections-grey .container-fluid {
    margin: 0 -15px 0 0;
 }

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Выровнять изображение по правому краю

спросил

Изменено 3 года, 2 месяца назад

Просмотрено 2к раз

Итак, я новичок во всем кодировании, и для этого сайта, который я создаю для класса, я хочу выровнять эту фотографию, которая у меня есть, внизу и переместить ее в правую часть страницы.

 человек в настройках VR типа галограммы

Это код для изображения, и я попытался добавить что-то вроде align=center , но это не дало никаких результатов. Каков правильный код для перемещения моего изображения в правую часть страницы?

4

Хотя вы можете использовать float:right , это будет означать, что вам нужно очистить это float для всего, что следует за этим элементом. Вы можете использовать text-align для родительского элемента для более простого варианта:

 div {
  выравнивание текста: вправо;
} 
 <дел>

Пример того, как float портит ваш макет без clear (обратите внимание, что это выглядит хорошо на небольшой ширине Stackoverflow, нажав полная страница покажет фактический результат).

 изображение {
  поплавок: справа;
} 
 <дел>
  
   
Здравствуй, мир

HELLO WORLD

Пример использования flexbox

 div {
  дисплей: гибкий;
  выравнивание содержимого: flex-end;
} 
 <дел>

Пример использования float и clear ing:

 .clear::после {
  дисплей: блок;
  содержание: "";
  ясно: оба;
}

.плавать {
  поплавок: справа;
} 
 <дел>
  <дел>