html - 如何在布局中正确对齐 LI 中的文本和 DIV 中的图像？

Question

这是我正在开发的汽车展厅的代码: https://jsfiddle.net/zoh03cdv/

我有两个问题。

第一个问题是让图像和文本彼此相邻，尽管我将 contentbox1 设置为 2 列:

* {
width: 890px;
}

a {
text-decoration: none;
}

header{
  margin: 0; padding: 2em 5em 4em; color: #efefef;
  overflow:hidden;
  position: relative;
}

header::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: flex;
flex: 1 0 15%;
flex-grow: 3;
flex-wrap: wrap;
flex-basis: 100%;
width: 800px;
margin-left: 16px;
list-style: none;
margin: 3px;
justify-content: space-between;
}
ul.vehicleinfo li { 
font-family: sans-serif;
font-size: 88%;
color: #333;
background-color: yellow;
margin-bottom: 10px;
width: 400px;
margin-right: 40px;
margin: 0 0 40px 0; 
justify-content: flex-end;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
}
div.autocontent {
width: 760px;
margin-left: 70px;
}
.price {
width: 550px;
text-align: center;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
}
.descript1 {
font-size: 14px;
float: left;
}

<div class="autocontent">
<ul class="vehicleinfo">
<li><h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS WITH EVERY EXTRA</h3></li>
<li><h3 class="price">£36,500</h3></li>
</ul>
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="descript1">gold, 24,000 miles</div>
</div>
</div>

文本被切断并且没有像我预期的那样继续到另一行:/image/tQMGN.jpg

我试图让事情均匀地对齐，作为 DIV 和 DIV 中的 LI 完成此操作。

任何帮助都可以让这段代码看起来更美观，它可以部分工作，但 div 部分并不是最简单的，至少对于 autocontent 类中包含的任何内容来说是这样。

我的问题是让色谱柱正常工作。

Answer 1

为了更合适的UI布局和UX。

尝试使用以下代码更新您的 HTML 和 CSS

a {
  text-decoration: none;
}

header {
  margin: 0;
  padding: 2em 5em 4em;
  color: #efefef;
  overflow: hidden;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}

div.content {
  font-family: sans-serif;
  font-size: 16px;
  width: 460px;
}

ul.vehicleinfo {
  display: block;
  list-style: none;
  padding: 0 10px;
}

ul.vehicleinfo li {
  font-family: sans-serif;
  font-size: 88%;
  color: #333;
  margin: 0;
  padding: 5px 0;
  border-radius: 10px;
}

ul.vehicleinfo li * {
  display: block;
}

ul.vehicleinfo li h3 {
  font-size: 1.2em;
  font-weight: 700;
}

div.autocontent {
  width: 760px;
  margin-left: 70px;
  display: flex;
  background: #f3f3f3;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  margin-bottom: 10px;
}

.price {
  font-weight: 700;
}

.contentbox1 {
  column-span: 2;
}

.autoimg img {
  width: 340px;
  border-radius: 8px;
}

.descript1 {
  font-size: 14px;
  float: left;
}

<header>
  <h1>VAN CENTRE</h1>
  <h2>1 Anytown Road, Birmingham</h2>
  <h3>0121 496 0000</h3>
</header>
<div class="content">
  <div class="autocontent">
    <div class="contentbox1">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>

    </div>
    <ul class="vehicleinfo">
      <li>
        <h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
      </li>
      <li>
        <h3 class="price">£22,500</h3>
      </li>
      <div class="descript1">white, 20,000 miles</div>
    </ul>

  </div>
  <div class="autocontent">
    <div class="contentbox1">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>

    </div>
    <ul class="vehicleinfo">
      <li>
        <h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
      </li>
      <li>
        <h3 class="price">£36,500</h3>
      </li>
      <div class="descript1">gold, 24,000 miles</div>
    </ul>

  </div>

享受吧!