让 flex-container 中的 DIV 正确对齐 space？

Question

这是我页面的代码：

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
}

h1, h2, h3, h4, h5 {
font-family: Helvetica, Arial, sans-serif;
}
  
header {
display: block;
background-color: #B22222;
color: #FFFFFF;
padding: 30px;
margin: 20px;
}

div.sidebar {
display: table-row;
padding: 30px;
margin-left: 5px;
float:left;
width: 110px;
height: 400px;
background-color: yellow;
}

article {
display: block;
margin: 20px;
}


article.at1 {
    background-color: #FFFFFF;
    position: relative;
    margin-left: 200px;
    margin-right: 200px;
    top: 10px;
    border: 2px solid;
    border-radius: 12px;
    height: auto;
    width: 900px;
} 

.flex-container {
  display: flex;
}

.flex-container > div {
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  align-content: space-around;
  margin-top: -10px;
}

.flex-container > div img {
width: 230px;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}

.flex-container > div:nth-child(2) {
margin-left: -20px;
}


.flex-container > div:nth-child(3) {
float: right;
display: table;
}

<body>
<header>
<h1>PREMIER CAR SALES</h1>
<h3>Great Western Road, Glasgow</h3>
<h2>Tel: 0141 496 0000</h2>
</header>

<div class="sidebar">
It works
</div>


<article class="at1">
<div class="flex-container">
  <div><img src="https://parkers-images.bauersecure.com/Scale/pagefiles/200868/cut-out/900x600/toyota_avensis_saloon.jpg"></div>
  <div><h3>2017 67 TOYOTA AVENSIS 1.8 VVT-i BUSINESS EDITION 4dr</h3>
  <p>blue, 28,000 miles </p></div>
  <div><h3>POA</h3></div>  
</div>
</article>

<article class="at1">
<div class="flex-container">
  <div><img src="https://i.imgur.com/ZiTeHos.jpg"></div>
  <div><h3>2016 66 ELDDIS AUTOQUEST 196 2.0 HDi</h3>
  <p>6 berth, 6 belted seats, 7.34m long, 2017 model year but produced in November 2016, white, There’s certainly seating for six – and more! The front settee will take two, with four more in the dinette around a wall-mounted table. Meanwhile, the rear lounge will accommodate another four (at least) and has a free-standing table plus a flip-up surface on the rear wall. There’s a television point and wall-mounting in the rear lounge’s front corner.>

Kitchen facilities include generous worktop space, three-burner gas hob and good-sized sink. Beneath are the separate oven and grill and 80-litre three-way fridge with removable freezer compartment. Four overhead lockers, four lower drawers and a pan store provide excellent storage.</p></div>
  <div><h3>£46,950</h3></div>  
</div>
</article>




<article class="at1">
<div class="flex-container">
  <div><img src="upload/6203342.jpg"></div>
  <div><h3>1998 S FORD</h3>
  <p>blue</p></div>
  <div><h3>POA</h3></div>  
</div>
</article>

</body>
</html>

弹性容器有效；主要问题是此页面中的第三个标签，其中第三个 div 没有与其他两个标签对齐；在上面的示例中，它有点太接近 1998 FORD。

我试过使用 20px、40px 等各种值来设置 margin-left 和 margin-right，但没有成功。

尝试修复此弹性容器部分的任何帮助都有效；除了这一小部分，模板工作得很好。

Answer 1

我认为问题的发生是因为信息产品的宽度大小不固定。您只需设置图像的大小。但信息产品和价格跟随内容的宽度。

这里我尝试解决你的问题。首先，我们需要将特定的选择器放在具有某些 class 名称的信息产品上。同理价格。

其次，你的风格和div img一样，但这次我们将添加下一个div，其中包含信息产品和价格。

第三，一种简单的方法，将 img 的样式属性复制粘贴为属性以获取信息产品和价格。然后，给信息产品固定宽度。

这是最后两步。

给 500px 或您使用一些百分比作为信息产品宽度值。
自动为您的价格宽度赋值。

那么，你就解决了这个问题。

这是我为解决您的问题而编写的代码

Part of the HTML
————————————————
<div class="info">
     <h3>1998 S FORD</h3>
     <p>blue</p>
</div>
<div class="price">
      <h3>POA</h3>
</div>
————————————————


Part of CSS 
————————————————
.flex-container > div img {
    width: 230px;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}

.flex-container > div.info {
    width: 500px;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}

.flex-container > div.price {
    width: auto;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}
————————————————

让 flex-container 中的 DIV 正确对齐 space？

Getting DIV in flex-container to align space properly?

html

css-selectors

flexbox

flexboxgrid