如何使用 flex 或 DIV 并排显示列？

Question

我正在转换具有以下布局的旧 HTML 网站：

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>

注意after伪选择器没有显示文本。

这就是我的设计目标（虽然是白色背景）：

Advert design from magazine

我知道列间距的列间距。

我如何使用 DIV 和 flex 或 grid 来做到这一点？

到目前为止我已经尝试过：

  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 class="autota">
    <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 class="autota"><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 class="autota">
    <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>

这看起来不像链接到的图像。

感谢任何帮助！

Answer 1

所以你的html应该看起来像这样

<div class="grid-container">
   <div class="grid-item">
     <div class="autota">
        <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 class="grid-item">
      Do the same as above for all items
   </div>
</div>

那你可以加上css

.grid-container {
   display: grid;
}

您可以添加大量不同的样式来进一步更改网格的布局！了解基本布局后，请看这里 https://www.w3schools.com/css/css_grid.asp

Answer 2

您必须将 div 向左浮动。您应该使用宽度百分比来使其响应。我建议你使用一些 CSS 框架，比如 Bootstrap，不需要 re-invent 轮子。

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 class="autota">
    <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 class="autota"><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 class="autota">
    <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 class="clear">

Answer 3

如果你想用 flexbox 做那种布局你可以

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

变成这样

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

在你的 css 中你会放这样的东西：

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

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

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

仅此而已。不需要任何类似的外部库。

当然，正如您自己所说。这可以通过 CSS 网格以更简单的方式解决：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

如何使用 flex 或 DIV 并排显示列？

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

html

css