Блог

Главная - Вопросы по программированию - Как переместить и выровнять мои два элемента?

Как переместить и выровнять мои два элемента?

#html #css #position #alignment

#HTML #css #положение #выравнивание

Вопрос:

надеюсь, вы могли бы мне помочь, у меня есть два вопроса:

  1. Как мне просто переместить мое основное изображение sunset на 110 пикселей сверху.
  2. а также как мне сделать так, чтобы мой логотип располагался точно между изображением и левой стороной.

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

пример следующий:

введите описание изображения здесь

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background-color: #6B6B6B;
}
img {
    display: block;
    max-width: 100vh;
    max-height: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
    #logo {
    position: absolute;
    top: 110px;
    left: 10%;
    width: 123px;
    margin-left: -61.5px; /* half width */
}
</style>  
 <div id="logo"><img src="http://wizzfree.com/pix/logo2.png"></div>
<img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">

Комментарии:

1. Наличие вашего logo div вне тега body недопустимо для HTML…

2. Можете ли вы добавить ожидаемый результат в вопросе для большей ясности.?

3. добавить ожидаемый результат? необходимо расположить основное изображение на 100 пикселей сверху. необходимо выровнять логотип между изображением слева и сбоку! небольшие исправления css / html для редактирования дизайна и общего баланса и т.д.

4. rayees, немного больше ясности выше (введите описание изображения здесь)

Ответ №1:

Как насчет этого:

(Обновлено, чтобы добавить 3-й столбец и медиа-запросы)

 body {
    background-color: #6B6B6B;
    margin:0;
}

img {
    display: block;
    max-width: 100vh;
    max-height: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#container {
    margin-top: 110px;
    position: relative;
    display: block;
    background-color: red;
    text-align: center;
}

#inner {
    position: relative;
    background-color: green;
    display: inline-block;
}

#col1, #col2, #col3 {
  width: 100%;
}

#col1, #col3 {
  min-width: 123px;
  background-color: lightblue;
}

/* column widths defined in CSS */
@media only screen and (min-width: 400px) {
  #inner {
    display: flex;
    flex-direction: row;
  }

  #col1, #col3 {
    width: 30%;
  }

  #col2 {
    width: 40%;
  }
}

/* column widths adjust to image size */
@media only screen and (min-width: 600px) {
  #inner {
    display: inline-block;
  }

  #col1, #col3 {
      position: absolute;
      display:block;
      top:0;
      bottom: 0;
      width:calc(50vw - 50%);
  }

  #col1 {
      left: calc(50% - 50vw);
  }

  #col2 {
      width:auto;
  }

  #col3 {
      right: calc(50% - 50vw);
  }
}  
 <div id="container">
   <div id="inner">
      <div id="col1">
         <img src="http://wizzfree.com/pix/logo2.png">
      </div>
      <div id="col2">
         <img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">
      </div>
      <div id="col3">
        <p>Lorem ipsum</p>
      </div>
   </div>
</div>

Комментарии:

1. выглядит неплохо sbgid. но вместо этого, чтобы сократить и упростить код, вы можете использовать 3 .column (по 2 с каждой стороны и один в середине)!

2. Это проще, если все столбцы имеют известную ширину, а не адаптируются к масштабированию изображения. Я обновил ответ, чтобы включить оба метода разных размеров — вы можете использовать его в соответствии с вашими потребностями оттуда.