Использование Flex Box для упорядочения материала в блоке HTML CSS - PullRequest
Новая
       2

Использование Flex Box для упорядочения материала в блоке HTML CSS

0 голосов
/ 02 мая 2019

Я пытаюсь сделать так, чтобы изображения появлялись в моей предварительно созданной коробке, которую я создал. Прямо сейчас они слишком широки и появляются за пределами моей ширины 50 м. Кроме того, они довольно большие по высоте, и я не знаю, является ли это просто изменением картинки или кода. Я использую flexbox для этого.

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

main{
    width:50em;
    border-style:solid;
    display:flex;
}

.images{
    display: flex;
    flex-direction: row;
    flex: 1 1 25em;
    flex-wrap: wrap;
    flex-grow: 1;
}
<!DOCTYPE html>
<html>

<head>
    <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
    <meta charset="UTF-8">
    <!-- A link to reset -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="flex.css">
</head>
    
<body>
    <main class="wrapper">
        
        <header id="images">
            <img src="student-misc-02.jpg" alt="student1">
            <img src="student-misc-06.jpg" alt="student1">
            <img src="student-misc-08.jpg" alt="student1">
            <img src="student-misc-12.jpg" alt="student1">
            <img src="student-misc-19.jpg" alt="student1">
            <img src="student-misc-20.jpg" alt="student1">
        </header>    
        
    </main>
    
</body>

</html>

1 Ответ

1 голос
/ 02 мая 2019

Я исправил код CSS, чтобы он соответствовал вашему коду HTML. Кроме того, в некоторых ваших изменениях, которые вы отображали в виде 3 столбцов, последнее правило CSS пытается воспроизвести макет этих 3 столбцов. 

main {
  width: 50em;
  border-style: solid;
  display: flex;
}

/* fix the selector to match yout html code using id, not class */
#images {
  display: flex;
  flex-direction: row;
  flex: 1 1 25rem;
  flex-wrap: wrap;
  flex-grow: 1;
}

/* If you need the three columns as your original question */
#images img {
  width: 33%; 
  margin: auto;
}
<!DOCTYPE html>
<html>

<head>
  <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
  <meta charset="UTF-8">
  <!-- A link to reset -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="flex.css">
</head>

<body>
  <main class="wrapper">

    <header id="images">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
    </header>

    <section class="title">
      <!--<h1>XD Rountable 2019 Event Calendar</h1>-->
    </section>

    <footer>
    </footer>

  </main>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...