Блог

Главная - Вопросы по программированию - Как я могу сделать изображения в ряд

Как я могу сделать изображения в ряд

#html #css #image #web

Вопрос:

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

Как это должно быть:

желанный

Как это бывает:

фактический

Вот мой код:

 body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
} 
 <!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="instagram.png" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="facebook.png" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="twitter.png" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

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

1. Привет, < это для добавления предложений, вы можете использовать { } значок для вставки блоков кода

2. Также <div> теги не допускаются внутри <p> тегов

Ответ №1:

Вы можете использовать flexbox:

 .social-images{
  display: flex;
}

display: inline-block это тоже сработало бы. Посетите CSS — Дисплей для получения дополнительной информации.

 body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  display: flex;
  justify-content: space-around;
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
} 
 <!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="https://picsum.photos/200/300" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="https://picsum.photos/200/300" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="https://picsum.photos/200/300" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

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

1. хорошо, это похоже на то, что почти справа, так как я могу центрировать его и сделать некоторое пространство между изображениями?

2. попробуйте добавить justify-content: space-between к вышесказанному. Вы можете увидеть все возможные значения и иллюстрации на css-tricks.com/snippets/css/a-guide-to-flexbox

3. Добавил пример в ответ. Изображения уже сосредоточены на странице, насколько я могу видеть. Вы также можете создавать интервалы с помощью простых margin

4. это не его локи, как это: imgur.com/a/1phF10Q

5. Ваш #main { max-width: 800px; не позволяет ему иметь достаточную ширину. Либо сделайте изображения меньше, либо увеличьте ширину содержимого.

Ответ №2:

родительский контейнер

 display: flex;

контейнеры img

 display: flex;
flex-direction: column;
flex-wrap: nowrap; /* you can use wrap in case you want it to overflow*/

Ответ №3:

Изучайте flexbox или сетку в css, например, в школах w3:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp

Метки: