0

这是我的页面的代码：

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 年的福特了。

我试过用 20px、40px 等各种值来做 margin-left 和 margin-right ，但它没有用。

尝试修复此 flex-container 部分的任何帮助都有效；除了这个小部分之外，模板工作得很好。

4

1 回答 1

1

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

在这里，我尝试解决您的问题。首先，我们需要将特定的选择器放在具有某些类名的信息产品上。以同样的方式做价格。

其次，你的样式就像你对 div img 所做的那样，但这次我们将添加下一个 div，其中包含信息产品和价格。

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

这是最后两步。

  1. 给 500px 或者您使用一些百分比作为信息产品宽度值。

  2. 为您的价格宽度自动赋予价值。

然后，您将解决这个问题。

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

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;
}
————————————————
于 2021-01-30T11:00:49.480 回答