Bollate

HTML

[ANSWERED] css – how to order a HTML page by
?

By

Nov 20, 2022 ,

Solution 1 :

You can use Bootstrap 4 which is the current version of CSS framework but not an only option. Without BS you will have terrible CSS code that might make your browser load slowly. It is just a contribution of CSS to browser and one of the factor why browsers load slowly (like 5%) Hence BS could be better alternative. This will actually help you build more responsive web page.

The image and its description is within a card which is a bootstrap utility.

Note: The cards are displayed vertically on small screens (less than 576px). Hence if you run this snippet you might get this stacked. For better resolution and its output please run it in your browser. Also, please increase the height of the card by applying required CSS selector and height to it.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <div class="card-columns">
      <div class="card bg-default">
        <div class="card-body text-center">
          <img src="file:///C:/azizaymen/images-B/hp.jpg">
            <br>
            <p>HP</p>

        </div>
      </div>
      <div class="card bg-default">
        <div class="card-body text-center">

            <img src="file:///C:/azizaymen/images-B/asus.jpg">
            <br>
            <p>ASUS</p>

        </div>
      </div>
      <div class="card bg-default">
        <div class="card-body text-center">
          <img src="file:///C:/azizaymen/images-B/apple.jpg">
          <br>
          <p>HP</p>
        </div>
      </div>
      <div class="card bg-default">
        <div class="card-body text-center">
          <img src="file:///C:/azizaymen/images-B/o5.jpg">
          <br>
          <p>lenovo</p>
        </div>
      </div>
      <div class="card bg-default">
        <div class="card-body text-center">
          <img src="file:///C:/azizaymen/images-B/hp.jpg">
          <br>
          <p>Dell</p>

        </div>
      </div>
      <div class="card bg-default">
        <div class="card-body text-center">
         <img src="file:///C:/azizaymen/images-B/huawei.jpg">
	<br>
	<p>huawei</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Hope this helps.

Solution 2 :

Install bootstrap if you haven’t, that way you’ll make the grid layout of your site way easier. When bootstrap is installed you can format your site like this:

<body>
<div class="row">
<div class = col-sm-3>  <img src="file:///C:/azizaymen/images-B/hp.jpg">
</div>
<div class = col-sm-3>  <img src="file:///C:/azizaymen/images-B/hp.jpg">
</div>
<div class = col-sm-3>  <img src="file:///C:/azizaymen/images-B/hp.jpg">
</div>
</div>
</body>

Repeat this until you’ve sorted out all you pictures. Like said before, check out some basic video’s tutorials… Cheers

Solution 3 :

try it like this should give u a direction

if u wana look:
https://codepen.io/riazxrazor/pen/XWJxBeG

.wrapper{
  width: 70%;
  margin:0 auto;
}
.wrapper > div{
  float:left;
  width:200px;
  height: 300px;
  border: 1px solid #f0f0f0;
  padding:5px;
  margin: 5px;
}

.wrapper > div > img {
  width: 100%;
}

<html>
<head>
<title>projet b</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
   <div class="wrapper">
     <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
    <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
       <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
       <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
     <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
    <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
  <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
       <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
       <div>
    <img src="https://files.inkmonk.com/site/20180524_163041627709_227b6e_product_labels.png">
    <br>
    <p>HP</p>
  </div>
    </div>
</body>
</html>

Problem :

I am a beginner in HTML and CSS. I am learning how to order a page’s div horizontally, so that it gets divided into rows and columns to become like this ?

my page

what i want

my page code:

<html>
<head>
<title>projet b</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
	<img src="file:///C:/azizaymen/images-B/hp.jpg">
	<br>
	<p>HP</p>

	<img src="file:///C:/azizaymen/images-B/asus.jpg">
	<br>
	<p>ASUS</p>

	<img src="file:///C:/azizaymen/images-B/apple.jpg">
	<br>
	<p>HP</p>

	<img src="file:///C:/azizaymen/images-B/o5.jpg">
	<br>
	<p>lenovo</p>

	<img src="file:///C:/azizaymen/images-B/hp.jpg">
	<br>
	<p>Dell</p>

	<img src="file:///C:/azizaymen/images-B/o6.jpg">
	<br>
	<p>ASUS</p>

	<img src="file:///C:/azizaymen/images-B/huawei.jpg">
	<br>
	<p>huawei</p>

	<img src="file:///C:/azizaymen/images-B/ipad.jpg">
	<br>
	<p>iPad</p>

	<img src="file:///C:/azizaymen/images-B/samsung.jpg">
	<br>
	<p>SAMSUNG</p>
</body>
</html>

Comments

Comment posted by Riaz Laskar

look into css , try some videos

Comment posted by Aymen Hmani

i just want a exemple

Comment posted by Roope

There are plenty of examples of layouts like this online. Do some research.

Comment posted by designshack.net/articles/css/…

Look into using CSS

Comment posted by Riaz Laskar

since ur a beginner, please i would recommend use plain css over a framework, go step by step learn Box Model(floats) -> Flex Model(

Comment posted by Riaz Laskar

if he is a beginner, isnt it better to learn by doing in plan css, rathar then using a framework. m sorry, i disagree with the answer

Comment posted by noobprogrammer

@RiazLaskar The task that he is trying to achieve is optimal. If he is the beginner he should be taught what optimal solution should be. Otherwise he will just rely on CSS not considering BS framework in future.Instead of using heavy CSS he should be taught the best possible solution which I have done. Anyway, THANKS for the downvote.

Comment posted by noobprogrammer

@RiazLaskar I see your answer is NOT optimal AT ALL. Using only CSS in 2020 is just not done. Beginners should be taught the best possible way. So I also don’t agree with your answer.

Comment posted by Deykun

Suggesting

Comment posted by Riaz Laskar

so you are implying, for a beginner, just fully skip the box model, isn’t float still a part of css, if its so bad it should hv been depricated long ago. look at the my text i gave a general direction, not a solution.

Comment posted by Deykun

The great advantage of

Comment posted by noobprogrammer

I agree to @Deykun ‘s answer.

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022