Jestem nowy w HTML i CSS, student pierwszego roku IT. Muszę wyświetlać obok siebie tekst i obrazy. Tekst powinien zajmować większą część strony, a obrazy powinny znajdować się po prawej stronie tekstu. Wiem, że będę musiał użyć do tego CSS, ale nie mam pojęcia, jak to zrobić.

    <!-- 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>

Wypróbowałem wiele przykładów w Internecie, ale nie wydaje mi się, aby działały. Poniżej znajduje się zdjęcie tego, jak ma wyglądać. Każda pomoc zostanie doceniona. Z góry dziękuję

enter image description here

-1
Anton 2 kwiecień 2020, 17:53

5 odpowiedzi

Najlepsza odpowiedź

Flex jest zdecydowanie najlepszym rozwiązaniem. To powinno zacząć. Jeśli prześlesz swoje zdjęcia do imgur, możemy zobaczyć, jak działają rzeczywiste obrazy

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>
1
DCR 2 kwiecień 2020, 15:12

Możesz do tego użyć układów siatki 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>

Styl

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

To tylko podstawowa idea. Więcej informacji znajdziesz w dokumentacji: https://developer.mozilla.org/de/ docs / Web / CSS / CSS_Grid_Layout

0
Timon 2 kwiecień 2020, 15:02

Musisz dodać styl css ... użyj instrukcji float w css lub użyj stylu wbudowanego w swoim kodzie 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>
0
Amirhossein 2 kwiecień 2020, 15:15

Najszybszym sposobem osiągnięcia tego byłoby użycie siatki CSS

<link href="myCSSfile.css" rel="stylesheet" type="text/css">
  1. połącz plik css z kodem HTML, umieść ten kod wewnątrz tagów nagłówka.

  2. Utwórz 3 elementy div, jeden obejmujący wszystko w treści i dwa podrzędne elementy div, które tworzą lewą i prawą stronę ekranu

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;
}

Ostatecznie nie obejrzysz samouczka dotyczącego siatki CSS lub flexbox, takiego jak te: CSS Grid lub Flexbox

0
Julius Guttenberg 2 kwiecień 2020, 15:23

Możesz użyć właściwości position:absolute; wewnątrz tagów „”. Wewnątrz tagu <style> powinno wyglądać mniej więcej tak:

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

Lub mogłeś to zrobić w ten sposób:

<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">
0
0Bionic 2 kwiecień 2020, 15:09