У меня есть пробел между двумя изображениями на 100% ширине

Итак, я разрабатываю страницу входа в систему. В настоящее время я застрял на действительно досадной проблеме. Итак, у меня есть 2 div, которые должны быть рядом друг с другом, разделяя страницу ровно пополам. Но вместо того, чтобы быть рядом друг с другом, они разделены большим куском ничего.

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

#rightSide {
  background-image: url('/rightSide.png');
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  display: inline-block;
  float: left;
}

#OrgaChat {
  display: inline-block;
}

#signInForm {
  display: inline-block;
}

#leftSide {
  background-image: url('/leftSide.png');
  background-repeat: no-repeat;
  display: inline-block;
  width: 50%;
  height: 100%;
  float: left;
}

<head>
  <title>OrgaChat</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body>
  <div id='leftSide'></div>
  <div id='rightSide'>
    <h1 id='OrgaChat'>OrgaChat</h1>
    <div id='loginBox'>
      <form class = "signInForm">
        <div class = "SignInDiv"><input type = "text" placeholder='Email' class='signInInput'></div>
        <div class = "SignInDiv"><input type = "text" placeholder='Password' class = "signInInput"></div>
        <button type = "submit" class = "loginFormSubmit">Log In!</button>
      </form>
    </div>
  </div>
</body>

Это код HTML / CSS. Когда я запускаю его, я получаю следующее:

У меня есть пробел между двумя изображениями на 100% ширине

Перейдите к placeholder.com и получите изображения для фрагмента

— 30.12.2018 18:37

Насколько велики изображения? Вы установили их на no-repeat, поэтому может не быть места, просто изображения не растягиваются достаточно далеко.

— 30.12.2018 18:38

html css

30.12.2018 18:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

добавить background-size:100% 100%; или background-size:cover в #rightSide и #leftSide

Большое вам спасибо за вашу помощь. Это решило мою проблему

— 30.12.2018 18:42

30.12.2018 18:38

Скорее всего, ваши изображения недостаточно растянуты, создавая впечатление белого пространства. Попробуйте добавить background-size: cover:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

#rightSide {
  background-image: url('https://media.istockphoto.com/photos/abstract-green-background-picture-id689323732?k=6&m=689323732&s=612x612&w=0&h=EJlWrflccYuhV74Z3O-eXvTAo0sfMH7SZhO_-xWNMDg=');
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 100%;
  display: inline-block;
  float: left;
}

#OrgaChat {
  display: inline-block;
}

#signInForm {
  display: inline-block;
}

#leftSide {
  background-image: url('https://i.pinimg.com/originals/bb/4c/c3/bb4cc3b2fae7978db32f35b4519cc0f8.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  width: 50%;
  height: 100%;
  float: left;
}

<head>
  <title>OrgaChat</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body>
  <div id='leftSide'></div>
  <div id='rightSide'>
    <h1 id='OrgaChat'>OrgaChat</h1>
    <div id='loginBox'>
      <form class = "signInForm">
        <div class = "SignInDiv"><input type = "text" placeholder='Email' class='signInInput'></div>
        <div class = "SignInDiv"><input type = "text" placeholder='Password' class = "signInInput"></div>
        <button type = "submit" class = "loginFormSubmit">Log In!</button>
      </form>
    </div>
  </div>
</body>

30.12.2018 18:40

удалите поле по умолчанию для leftSide и rightSide DIV и проверьте

#rightSide {
  background-image: url('/rightSide.png');
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  display: inline-block;
  float: left;
  margin:0px;
}
#leftSide {
  background-image: url('/leftSide.png');
  background-repeat: no-repeat;
  display: inline-block;
  width: 50%;
  height: 100%;
  float: left;
  margin:0px;
}

30.12.2018 18:51

Другие вопросы по теме

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

HTML: несоответствующая высота панели сетки?

Vanilla JS слева направо переключает анимацию

Отображать изображения вертикально по центру, когда они отображаются в держателе

Проблемы с созданием логотипа в CSS?

Центрировать элементы в прокручиваемой области

Управляйте: до и: после с помощью javascript

CSS - изменение цвета фона Div в зависимости от цвета изображения внутри того же Div

Как создать Border на входе тд в таблице?

HTML / HP: Emogrifier превращает {} в% 7B и% 7D

У меня есть пробел между двумя изображениями на 100% ширине

Ответы 3

Другие вопросы по теме

Похожие вопросы