Блог

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

Попытка разместить 2 дива с изображением и текстом рядом друг с другом

#html #css

Вопрос:

поэтому я действительно попытался использовать float и inline, чтобы выровнять мои ящики рядом друг с другом.

Вот пример того, что у меня есть.

То, что я пытаюсь сделать, — это переместить раздел CSS с информацией рядом с разделом HTML.

Вот мои файлы html и css для этих частей.

 /* SECOND SECTION */
.content2 {
  border: 4px solid black;
  padding: 20px;
  overflow: hidden;
  margin-top: 1%;
  margin-left: 2%;
  margin-right: 50%;
}

.content2 img {
  margin-right: 15px;
  float: left;
  height: 250px;
  width: 400px;
}

.content2 h3,
.content2 p {
  margin-left: 15px;
  display: block;
  margin: 2px 0 0 0;
}

/* THIRD SECTION */
.content3 {
  border: 4px solid black;
  padding: 20px;
  overflow: hidden;
  margin-top: 1%;
  margin-left: 50%;
  margin-right: 2%;
}

.content3 img {
  margin-left: 15px;
  float: right;
  height: 250px;
  width: 400px;
}

.content3 h3,
.content3 p {
  margin-right: 15px;
  display: block;
  margin: 2px 0 0 0;
} 
 <!--SECOND SECTION-->
<div class="content2">
  <img src="./resources/images/html.jpeg" alt="">
  <h2>HTML</h2>
  <p>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</p>
</div>

<!--THREE SECTION-->
<div class="content3">
  <img src="./resources/images/css.jfif" alt="">
  <h2>CSS</h2>
  <p>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.</p>
</div>

Я попытался найти ответ, извините, если это легко исправить. Я просто не мог заставить его работать, и я очень новичок в кодировании. Спасибо.

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

1. Никогда не используйте поплавки для дизайна. Ты получил flex-boxes и grid за это.

Ответ №1:

Оберните оба в div и используйте flexbox:

 /* SECOND SECTION */

body {
  width: 100vw;
  margin: 0;
}

.flex {
  display: flex;
  width: 100vw;
  justify-content: flex-start;
}

.content2 {
  border: 4px solid black;
  padding: 20px;
  overflow: hidden;
  width: 50%;
  margin-top: 1%;
  margin-left: 2%;
}

.content2 img {
  margin-right: 15px;
  float: left;
  height: 250px;
  width: 400px;
}

.content2 h3,
.content2 p {
  margin-left: 15px;
  display: block;
  margin: 2px 0 0 0;
}


/* THIRD SECTION */

.content3 {
  border: 4px solid black;
  padding: 20px;
  overflow: hidden;
  margin-top: 1%;
  margin-right: 2%;
  width: 50%;
}

.content3 img {
  margin-left: 15px;
  float: right;
  height: 250px;
  width: 400px;
}

.content3 h3,
.content3 p {
  margin-right: 15px;
  display: block;
  margin: 2px 0 0 0;
} 
 <div class="flex">
  <div class="content2">
    <img src="./resources/images/html.jpeg" alt="">
    <h2>HTML</h2>
    <p>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</p>
  </div>
  <!--THREE SECTION-->
  <div class="content3">
    <img src="./resources/images/css.jfif" alt="">
    <h2>CSS</h2>
    <p>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.
    </p>
  </div>
</div>

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

1. это сработало!! действительно ценю это! Собираюсь внедрить это в будущие проекты.

Метки: