CSS flexbox две колонки - PullRequest
Новая
       8

CSS flexbox две колонки

0 голосов
/ 08 марта 2019

Я пытаюсь создать чистый HTML / CSS-сайт, используя flex box, используя изображение, занимающее 50% слева, текстовое поле, занимающее 50% справа, а нижний колонтитул занимает 100% ширина под ними (я хочу добавить навигацию позже, возможно, меню гамбургера, не относящееся к этим вопросам atm), в то же время делая их отзывчивыми на устройства разных размеров. * Я хочу, чтобы изображение и правое текстовое поле были обернуты в столбец (img поверх текстового поля) на небольших устройствах

enter image description here

Проблемы, с которыми я сталкиваюсь: установка изображения на max-width или max-height на 100% делает его больше, чем контейнер div, в котором он находится, изображение заполняется не полностью (я хочу сохранить изображение пропорционально оригинальному размеру)

Как вы можете видеть ниже, изображение не занимает 100% контейнера, приведенный ниже CSS не единственный CSS, с которым я экспериментировал. Но я просматривал другие статьи, которые я нашел о stackoverflow и т. Д., Но ничто не ищет совершенно такой же проблемы; 

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0px;
  padding: 0px;
  text-align: left;
  display:block
  }

img {
  // width:auto;
  max-height: 100%;
  // overflow: none;
  // position: absolute;
 height: 400px;
 // max-width: 100%;
 top: 0;
 bottom: 0;
 border: 1px solid green;
}

.container {
  display: flex;
  flex-flow: row wrap;
}

.container > * {
  padding: 0px;
  flex: 1 100%; }

@media all and (min-width: 600px) {
  .content {
    flex: 1 0;
    }
  }
* +1012 *enter image description here

1 Ответ

4 голосов
/ 08 марта 2019

Пожалуйста, проверьте ниже пример. это может вам помочь. 

  *, ::after, ::before {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family:sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
  }
  img {
    max-width: 100%;
  }
  .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }
  .content .col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .footer {
    background: #eee;
    height: 100px;
  }
  @media(max-width: 767px){
    .content .col {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
  } 
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <main>
      <div class="container">
        <div class="content">
          <div class="col left">
            <img src="https://images.pexels.com/photos/994517/pexels-photo-994517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" title="" alt=""/>
          </div>
          <div class="col right">
            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. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>
    </main>

    <footer>
      <div class="footer"></div>
    </footer>
  </div>
</body>
</html>
...