Zanim zostałem odrzucony lub oznaczony za podobne pytania, szukałem na stosie, ale potrzebowałem wyjaśnień, ponieważ jestem początkującym projektowaniem stron internetowych i mam pewne problemy z pełnym zrozumieniem żargonu. Jako tło tworzę stronę profilu, na której zdjęcie użytkownika znajduje się po lewej stronie ekranu, a po prawej stronie zdjęcia powinna znajdować się sekcja informacji zawierająca paski przewijania. Użyłem div i mam paski przewijania, ale pojawiają się bezpośrednio pod obrazem. Potrzebuję, żeby było obok. Próbowałem użyć klas, dopełnienia i marginesu, aby spróbować wyśrodkować, ale nie mogłem przenieść podsekcji ani samego elementu div. Podobne do tego(http://blogs.bournemouth.ac. uk/research/files/2013/09/SPP1.jpg), ale z informacjami wyświetlanymi po prawej stronie obrazu. Proszę wybaczyć i oszczędzić mi tego długiego pytania, ale mam nadzieję, że wystarczająco jasno wyjaśniłem to, o co pytałem. Dziękuję. To jest mój kod :

body {
  background-color: rgb(5, 113, 176);
  font-family: arial;
  font-size: 15px;
}

h1 {
  background-color: rgb(24, 48, 100);
  color: #009999;
  font-size: 2em;
}

h2 {
  background-color: rgb(24, 48, 100);
  color: #009999;
}

img {
  filter: grayscale(1);
  width: 150px;
}

.Scroll-Paragraph {
  border: blue 8px solid;
  width: 30%;
  padding: 8px;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}
<h1>Marzuq Mir</h1>
<ul>
  Home|About Me|More
</ul>
<h1><b>Journey Through The Life of Marzuq</b></h1>
<img src="https://i.imgur.com/Tgqh5Hn.jpg?1" alt="A picture of Marzuq" />
<div class="Scroll Paragraph">
  <h2>All About Marzuq Mir</h2>


  <div class="Scroll-Paragraph">
    <p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games
      on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for
      my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement
      but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p>
  </div>
  <div class=:Scroll-Paragrah>
    <h2>
      My Favorite Foods to Eat
    </h2>
    <div class="Scroll-Paragrah">
      <UL>
        <br>
        <li>Steak</li>
        <br>
        <li>Mash Potatoes</li>
        <br>
        <li>Chicken</li>
      </UL>
    </div>
html css
1
Intisar Ratul 20 listopad 2019, 01:05
1
Czy możesz podać html i css, które wypróbowałeś?
 – 
Kalimah
20 listopad 2019, 01:10
Dzięki, zawsze miałem problem z umieszczeniem kodu tutaj, ale właśnie dowiedziałem się o ctrl K, przepraszam, jeśli spowodowałem jakiś problem
 – 
Intisar Ratul
20 listopad 2019, 01:17
1
Pamiętaj, że część kodu HTML jest nieprawidłowa. br nie jest prawidłowym dzieckiem ul
 – 
Jon P
20 listopad 2019, 01:39

3 odpowiedzi

Umieść oba elementy (obraz i blok) w innym div. ustaw img wewnątrz tego div na float:left

<!DOCTYPE html>
<html>

    <head>
        <title>Marzuq's Bio</title>
    </head>

    <style type="text/css">
        body{
            background-color: rgb(5,113,176);
            font-family: arial;
            font-size: 15px;
        }
        h1{
            background-color: rgb(24,48,100);
            color: #009999;
            font-size: 2em;
        }
        h2{
            background-color: rgb(24,48,100);
            color:#009999;
        }
        img{
            filter: grayscale(1);
            width: 150px;
        }
        .Scroll-Paragraph {
            border:blue 8px solid;
            width:30%;
            padding: 8px;
            max-height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
        }
        .wrap-around img {
           float:left;
        }



    </style>

    <body>
        <h1>Marzuq Mir</h1>
        <ul>
            Home|About Me|More
        </ul>
        <h1><b>Journey Through The Life of Marzuq</b></h1>
        
        <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
        <div class="wrap-around">
                <img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
                
                <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
            <div class=:Scroll-Paragrah><h2>
            My Favorite Foods to Eat
          </h2>
            <div class="Scroll-Paragrah"><UL>
                <br><li>Steak</li>
                <br><li>Mash Potatoes</li>
                <br><li>Chicken</li>
                </div>
            </UL>
            </div>
    </body>





</html>
1
Mario 20 listopad 2019, 01:28
Dziękuję, to jest dokładnie to, czego szukałem, więc chciałem powtórzyć to dla wielu sekcji, to w zasadzie to samo, prawda?
 – 
Intisar Ratul
20 listopad 2019, 01:32
Powinno być podobnie. Powinieneś zajrzeć na w3schools.com/Css/css_float.asp – czasami jest to błogosławieństwo, najczęściej jest to przekleństwo xD
 – 
Mario
20 listopad 2019, 01:39
Twój HTML jest nieprawidłowy.
 – 
David Thomas
20 listopad 2019, 02:50

Szukasz czegoś takiego? oczywiście wymagałoby to pewnych zmian, aby pasowało trochę lepiej, ale byłoby to rozwiązanie wykorzystujące flexbox

Możesz również rozważyć użycie frameworka css, takiego jak bootstrap. Tam możesz użyć systemu grid i flexbox, używając predefiniowanych klas CSS.

body{
    background-color: rgb(5,113,176);
    font-family: arial;
    font-size: 15px;
}
h1{
    background-color: rgb(24,48,100);
    color: #009999;
    font-size: 2em;
}
h2{
    background-color: rgb(24,48,100);
    color:#009999;
}
img{
    filter: grayscale(1);
    width: 300px;
    padding: 0px 25px;
}
.Scroll-Paragraph {
    border:blue 8px solid;
    width:30%;
    padding: 8px;
    max-height:100px;
    overflow-y:scroll;
    overflow-x:hidden;


}
.container {
display: flex;
}
.left-box {
  
}
.right-box {
  align-self: start
}
<h1>Marzuq Mir</h1>
<ul>
Home|About Me|More
</ul>
<h1><b>Journey Through The Life of Marzuq</b></h1>
<div class="container">
  <div class="left-box">
    <img src="https://images.pexels.com/photos/963486/pexels-photo-963486.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"alt="A picture of Marzuq"/>
  </div>
  <div class="right-box">
    <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
    <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
    <div class=:Scroll-Paragrah><h2>
    My Favorite Foods to Eat
    </h2>
    <div class="Scroll-Paragrah"></div>
  </div>
</div>
0
xDrago 20 listopad 2019, 01:44
Coś w tym stylu, zamierzam spróbować, czy istnieje sposób, aby uniknąć zbyt częstego używania div, lol,
 – 
Intisar Ratul
20 listopad 2019, 01:29
div jest często używany w projektowaniu stron internetowych, ponieważ zapewnia bardzo podstawowy kontener, którego możesz użyć w większości przypadków.
 – 
xDrago
20 listopad 2019, 01:32
2
Masz nieprawidłowy kod HTML. li muszą być dziećmi ol, ul lub menu
 – 
Jon P
20 listopad 2019, 01:42
To jest poprawne. Ma/miał kilka błędów w swoim kodzie, ale nie edytowałem niczego poza sekcją odpowiedzi na jego pytanie.
 – 
xDrago
20 listopad 2019, 01:44

Zmodyfikowałem twój kod. Zamknąłem tag img w znaczniku div i użyłem na nim właściwości float: left. Podobnie w przypadku akapitu użyłem float: right. Następnie utworzono pusty element div z właściwością clear: both, aby pozostała strona nie była zakłócana przez floaters. Mam nadzieję, że ten kod działa.

<!DOCTYPE html>
<html>

    <head>
        <title>Marzuq's Bio</title>
    </head>

    <style type="text/css">
        body{
            background-color: rgb(5,113,176);
            font-family: arial;
            font-size: 15px;
        }
        h1{
            background-color: rgb(24,48,100);
            color: #009999;
            font-size: 2em;
        }
        h2{
            background-color: rgb(24,48,100);
            color:#009999;
        }
        img{
            filter: grayscale(1);
            width: 150px;
        }
        .Scroll-Paragraph {
            border:blue 8px solid;
            width:30%;
            padding: 8px;
            max-height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
        }
        .imgdiv{
            float:left;
        }
        .paragraph{
            float:right;
        }
    </style>

<body>
   <h1>Marzuq Mir</h1>
   <ul>
       Home|About Me|More
   </ul>
   <h1><b>Journey Through The Life of Marzuq</b></h1>
   <div class="imgdiv">        
       <img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
   </div>
   <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
        <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
      <div class=:Scroll-Paragrah><h2>
              My Favorite Foods to Eat
          </h2>
          <div class="Scroll-Paragrah"><UL>
               <br><li>Steak</li>
               <br><li>Mash Potatoes</li>
               <br><li>Chicken</li>
          </div>
        </UL>
        <div style="clear:both;"></div>
    </body>
</html>
0
Hussain Abdullah 20 listopad 2019, 03:18

Podobne pytania

9 Dodawanie encji HTML za pomocą treści CSS
25 Wyrównać tekst w pionie obok obrazu?
30 Jak nadać tekstowi lub obrazowi przezroczyste tło za pomocą CSS?
30 Jak wyrównać tekst w pionie w div?
31 Jak mogę przejść wysokość: 0; do wysokości: auto; używając CSS?
25 Wyśrodkować obraz za pomocą środka wyrównania tekstu?
30 Jak wyrównać obraz w pionie w elemencie div
16 Jak przeformatować kod HTML za pomocą Sublime Text 2?
13 Jak wyrównać do prawej element elastyczny?

Nowe pytania

3 HTMLOptionElement: zdarzenie onclick nie jest wyzwalane
2 Jak wyświetlić tekst wprowadzany przez użytkownika w wybranym przez niego kolorze?
3 Numeracja nagłówków HTML nieoczekiwanie resetuje się
4 Zachowanie podczas zmiany rozmiaru przycisku
2 Jak zapobiec renderowaniu niektórych atrybutów x-blade w html?
3 Dlaczego mój drugi rejestrator zdarzeń nie będzie działał po pierwszym?
2 jak ustawić kolor tekstu, taki jak kolor tła dla trybu jasnego i ciemnego w e-mailu html?
1 Nie można określić XPath dla opisanego poniżej przypadku
3 Czytelny czas licznika
2 Błąd kątowy: Błąd: nie można znaleźć kolumny o identyfikatorze, gdy znajduje się ona w TS
Wszystkie pytania dotyczące html >

html

HTML (HyperText Markup Language) to język znaczników służący do tworzenia stron internetowych i innych informacji wyświetlanych w przeglądarce internetowej. Pytania dotyczące HTML powinny zawierać minimalny możliwy do odtworzenia przykład i pewne wyobrażenie o tym, co próbujesz osiągnąć. Ten tag jest rzadko używany samodzielnie i często jest łączony z [CSS] i [javascript].

Więcej na temat html...