How to display columns side-by-side with flex or DIV?-CodePudding

I'm converting an old HTML site which has this layout:

body {
font-family: Verdana, sans-serif;
font-size: 14px;
background-color: #FFF;
}

table {
background-color: #FFF;
width: 400px;
}
td, tr {
border: 1px solid;
}
td img {
width: 190px;
}
td img:after {
content: "Image for illustration purposes only";
font-weight: 300;
}

<h1>Stock list</h1>
<table>
    <tr>
        <td><img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <td><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg"></td>
        <td><b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg"></td>
        <td><b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></td>
    </tr>
</table>

Note that the after pseudo-selector did not display the text.

This is what I am aiming for as a design (although with the white background):

Advert design from magazine

I'm aware about column-gap for spacing of columns.

How would I do this with DIV and either flex or grid?

So far I've tried:

  body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  }
  
  div.autota {
        display: grid;
        width: 320px;
        border: 2px solid;
        columns: 2;
        margin-bottom: 15px;
        }
 div.autota img {
 height: 90px;
 }

<div >
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
            <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
        </div>
        <div ><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
        </div>
        <div >
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
            <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></div>

and this hasn't quite come out looking like the image linked to.

Any help is appreciated!

CodePudding user response：

You have to float the divs to the left. You should use percentage in width to make it responsive. I suggest you use some CSS framework like Bootstrap, no need to re-invent the wheel.

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  }
  
  div.autota {
        display: grid;
        width: 320px;
        border: 2px solid;
        columns: 2;
        margin-bottom: 15px;
        float:left;
        }
 div.autota img {
 height: 90px;
 }
 .clear {
 clear:both;
 }

<div >
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
            <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
        </div>
        <div ><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
        </div>
        <div >
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
            <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></div>
            <br >

CodePudding user response：

So your html should look something like this

<div >
   <div >
     <div >
        <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
     </div>
   </div>

   <div >
      Do the same as above for all items
   </div>
</div>

Then you can add css

.grid-container {
   display: grid;
}

And theres tons of different styles you can add to change the layout of your grid further! take a look here once you've got the basic layout https://www.w3schools.com/css/css_grid.asp

CodePudding user response：

If you want to make that kind of layout with flexbox you could

<table>
    <tr>
        <td><img src="my_image"></td>
        <td><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></td>
    </tr>
    ...
</table>

Into something like this

<div >
    <div >
        <div ><img src="my_image"></div>
        <div><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></div>
    </div>
    ...
</div>

Where in your css you would put something like this:

.container{
   display:flex;
   flex-direction: col;
   /* ... your styles */
}

.row{
   display:flex;
   flex-direction: row;
   width: 100%;
   /* ... your styles */
}

.col{
    width: 50%;
   /* ... your styles */
}

And that's about it. No need for external libraries of anything like that.

But of course, as you yourself said. This could be solved in an even easier manner with CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout