时间戳

首页 > 解决方案 > 响应地对齐彼此相邻的框

html - 响应地对齐彼此相邻的框

问题描述

我想将框和箭头全部对齐且笔直。我曾尝试使用填充等，但似乎效果不佳。

HTML：

<div class="listBox">
  <p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
  <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
</div>
  <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
  <p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
</div>

CSS：

.listBox{
  background-color: rgba(245, 246, 250, 0.7);
  border-radius: 15px;
  display: inline-block;
  width: 25%;
  margin-right: -4px;
  z-index: -1;
  padding: 8px;
}

.listBox p{
  font-size: 11px;
  font-family: Courier;
}

这就是发生的事情。

标签： htmlcss

解决方案

Flexbox 可能会使这项工作更好。

将您的容器元素设置为display: flex，并从 中删除width: 25%和display: inline-block删除.listBox。您可能需要考虑添加flex-grow: 1;和flex-basis: 0;使.listBox它们具有相同的宽度。

CSS：

.listContainer {
    display: flex;
}
.listBox{
    background-color: rgba(245, 246, 250, 0.7);
    border-radius: 15px;
    z-index: -1;
    padding: 8px;
    flex-grow: 1;
    flex-basis: 0;
}
.listBox p{
    font-size: 11px;
    font-family: Courier;
}

HTML：

<div class="listContainer">
    <div class="listBox">
        <p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
    </div>
    <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
    <div class="listBox">
        <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
    </div>
    <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
    <div class="listBox">
        <p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
    </div>
</div>

推荐阅读