Мне нужно отобразить изображения рядом с текстом

Question

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

    <!-- Add images of accepted payment Methods -->
    <div class="Pics">
        <img src="Edgars.jpg" alt="Logo of Edgars Thank U Card">

        <img src="Jet.PNG" alt="Logo of Jet Thank U Card">

        <img src="VisaCard.jpg" alt="Logo of Visa Card">

        <img src="MasterCards.png" alt="Logo of Master Card">

        <img src="SnapScan.png" alt="Logo of SnapScan">

        <img src="Standard Bank.png" alt="Logo of Standard Bank">
    </div>

    <!-- Adding paragraphs -->
    <h6 id="h06">Payment Methods</h6>

    <p id="headings">Edgars or Jet Card:</p>
    <p>Visit any of our Campuses that accept Debit and Credit Cards, and you can also pay with your Edgars or Jet Card! Please note that your Edgars or Jet Thank U Card along with the Card Holder must be present for the transaction. Proof of ID will be required</p>

    <p id="headings">Debit or Cerdit Card:</p>
    <p>A cardholder begins a credit card transaction by presenting his or her card to a merchant as payment for goods or services. The merchant uses their credit card machine, software or gateway to transmit the cardholder’s information and the details of
        the transaction to their acquiring bank, or the bank’s processor. </p>

    <p id="headings">SnapScan</p>
    <p>Download the SnapScan App to your Mobile Phone or Tablet Device. Open the SnapScan App, tap on “Scan” and scan the SnapCode displayed at the shop. This identifies the shop and prompts you to enter the amount you wish to pay. Enter your PIN to secure
        and complete the transaction. Richfield will receive a notification containing a confirmation of payment from SnapScan and your account will be updated accordingly.</p>

    <p id="headings">Standard Bank M65 Cash Payment</p>
    <p>Direct Cash Deposits can be made at any branch of Standard Bank using the M65 form which can be obtained from your nearest Campus. This form can only be used at Standard Bank branches. Don’t forget to ensure that your name AND student number are on
        both sections of the form.</p>

    <p id="headings">Electronic Funds Transfer (or CDI)</p>
    <p>Name of Bank: Standard Bank of South Africa</p>
    <p>Name of Account: Richfield Graduate Institute of Technology (PTY) Ltd.</p>
    <p>USE YOUR ICAS NUMBER, INITIALS AND SURNAME AS REFERENCE</p>
    </div>

Я пробовал множество примеров в Интернете, но не могу заставить его работать. Ниже изображение того, как это должно выглядеть. Любая помощь будет оценена. Заранее спасибо

Answer 1

flex - это определенно путь к go. Это должно начать вас. Если вы загрузите свои фотографии в imgur, мы увидим, как работают реальные изображения

html,body{
margin:0;
padding:0;
}
#container{
   display:flex;
   width:100vw;
}

#left{
   display:flex;
   flex-direction:column;
   width:70%;
   }
   
 #right{
   display:flex;
   width:30%;
   justify-content:center;
   margin-top:25%;
   }
   
   #group1,#group2{
      display:flex;
      flex-direction:column;
      }

<div id='container'>


<div id='left'>

<!-- Adding paragraphs -->
<h6 id="h06">Payment Methods</h6>

<p id="headings">Edgars or Jet Card:</p>
<p>Visit any of our Campuses that accept Debit and Credit Cards, and you can also pay with your Edgars or Jet Card! Please note that your Edgars or Jet Thank U Card along with the Card Holder must be present for the transaction. Proof of ID will be required</p>

<p id="headings">Debit or Cerdit Card:</p>
<p>A cardholder begins a credit card transaction by presenting his or her card to a merchant as payment for goods or services. The merchant uses their credit card machine, software or gateway to transmit the cardholder’s information and the details of
    the transaction to their acquiring bank, or the bank’s processor. </p>

<p id="headings">SnapScan</p>
<p>Download the SnapScan App to your Mobile Phone or Tablet Device. Open the SnapScan App, tap on “Scan” and scan the SnapCode displayed at the shop. This identifies the shop and prompts you to enter the amount you wish to pay. Enter your PIN to secure
    and complete the transaction. Richfield will receive a notification containing a confirmation of payment from SnapScan and your account will be updated accordingly.</p>

<p id="headings">Standard Bank M65 Cash Payment</p>
<p>Direct Cash Deposits can be made at any branch of Standard Bank using the M65 form which can be obtained from your nearest Campus. This form can only be used at Standard Bank branches. Don’t forget to ensure that your name AND student number are on
    both sections of the form.</p>

<p id="headings">Electronic Funds Transfer (or CDI)</p>
<p>Name of Bank: Standard Bank of South Africa</p>
<p>Name of Account: Richfield Graduate Institute of Technology (PTY) Ltd.</p>
<p>USE YOUR ICAS NUMBER, INITIALS AND SURNAME AS REFERENCE</p>
</div>
<div id='right'>

<div id='group1' class="Pics">
    <img src="Edgars.jpg" alt="Edgars">

    <img src="Jet.PNG" alt="Jet">

    <img src="VisaCard.jpg" alt="Visa">
</div>
<div id='group2' class='Pics'>
    <img src="MasterCards.png" alt="Master">

    <img src="SnapScan.png" alt="SnapScan">

    <img src="Standard Bank.png" alt="Standard">
</div>
</div>
</div>

Answer 2

Самый быстрый способ добиться этого - использовать CSS grid

<link href="myCSSfile.css" rel="stylesheet" type="text/css">

1. , связать файл css с HTML, поместить этот код в заголовок теги.

2. Создайте 3 div, один, который охватывает все внутри тела, и два подчиненных div, которые составляют левую и правую часть экрана

HTML

<div id="wrapper">
       <div class="Pics">
           ...lots of pics
       </div>
       <div id="text">
     ...your text
       </div>
</div>

CSS

#wrapper{
    display: grid;
    grid-template-areas: "text pics";
    grid-template-columns: 60% 40%;
}

.Pics{
    grid-area: pics;
}

#text{
    grid-area: text;
}

В конечном счете, вы не найдете время посмотреть учебник по CSS Grid или flexbox, как эти: CSS Сетка или Flexbox

Answer 3

Для этого вы можете использовать CSS Сетка.

Html

<div class="wrapper">
  <div class="text">Text One</div>
  <div class="picture">Picture One</div>
  <div class="text">Text Two</div>
  <div class="picture">Picture Two</div>
</div>

Стиль

 .wrapper{
     display: inline-grid;
     grid-template-columns: auto auto;
  }

Это просто основа c идея. Обратитесь к do c за дополнительной информацией: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout

Answer 4

Вы можете использовать свойство position:absolute; внутри ваших тегов ''. Внутри тега <style> это должно было выглядеть примерно так:

<style>
#id_name{
position:absolute;
left:*Value of How left it should be* px;
top:*Value of How left it should be* px;
}
</style>

или вы могли бы сделать это так:

<div class="Pics" style="float:right;">
<img src="Edgars.jpg" alt="Logo of Edgars Thank U Card">

<img src="Jet.PNG" alt="Logo of Jet Thank U Card">

<img src="VisaCard.jpg" alt="Logo of Visa Card">

<img src="MasterCards.png" alt="Logo of Master Card">

<img src="SnapScan.png" alt="Logo of SnapScan">

<img src="Standard Bank.png" alt="Logo of Standard Bank">

Answer 5

вам нужно добавить css стиль ... использовать оператор float в css или использовать встроенный стиль в коде html.

img {
  float: right;
}

<!-- Add images of accepted payment Methods -->
    <div class="Pics">
<p><img src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>