如何以三个最好的方式并排对齐按钮？

时间：2019-04-08 19:14:23

标签： html css

您好，我正在尝试维护我们的网站职业页面，我知道这足以危险并保持最新状态，但我需要帮助如何将所有这些工作清单以三个一组的形式排列在一起。以前是这样的，但是被删除了，谢谢，我没有参考。

我所拥有的：   1

我想要什么：   What I want 

<div>
            <a href="/careers/job_listing_4"><div class="content-tile">
            <p>Psychologist</p>
            <img src="/images/careers/location_pointer.png"/><p>Rock</p>
                </div></a>
    </div>
    <div>
            <a href="/careers/job_listing_1"><div class="content-tile">
            <p>Psychiatric Nurse Practitioner</p>
            <img src="/images/careers/location_pointer.png"/><p>Craw</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_2"><div class="content-tile">
            <p>Licensed Clinical Social Worker</p>
            <img src="/images/careers/location_pointer.png"/><p>Crawf</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_3"><div class="content-tile">
            <p>Licensed Clinical Social Worker</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_5"><div class="content-tile">
            <p>Dental Assistant</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_6"><div class="content-tile">
            <p>Bilingual Medical Receptionist</p>
            <img src="/images/careers/location_pointer.png"/><p>Craw</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_7"><div class="content-tile">
            <p>Certified Medical Assistant/Licensed Practical Nurse</p>
            <img src="/images/careers/location_pointer.png"/><p>Ter</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_8.php"><div class="content-tile">
            <p>Dental Office Coordinator</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_9"><div class="content-tile">
            <p>Call Center</p>
            <img src="/images/careers/location_pointer.png"/><p>Cli</p>
     </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_10"><div class="content-tile">
            <p>Nurse Practitioner</p>
            <img src="/images/careers/location_pointer.png"/><p>Blo</p>
     </div></a>
    </div>

That's the code, it's pretty basic, it used to be arranged in groups of two or three side by side, depending on how many job listings were posted, but that has been removed and I can't remember what it was.

5 个答案:

答案 0 :(得分：2)

对于这种特殊的布局，您可以使用Flexbox或CSS Grid，而不必包括任何框架。因为您希望它们在两个方向（行和列）上都对齐，所以我绝对建议您坚持使用专门针对这些情况的CSS Grid。

将flexbox用于同一任务是绝对可能的，尽管需要更多的工作和一些聪明的计算。

body * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-item {
  border: 1px solid black;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid blue;
  min-height: 100px;
  flex: 1 1 30%;
  margin: 5px;
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

答案 1 :(得分：0)

一种方法是使用grid。在这里，我有一个网格，它将具有三行相等大小的行，并根据我拥有的网格元素的数量自动根据需要创建列。显然，您可以更改网格属性以适合自己的需求：）

  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
  }
  .grid-element {
    width: 4rem;
    height: 2rem;
    margin: 0.2rem;
    background: #ccc;
  }
<div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
 </div>

答案 2 :(得分：0)

在项目中安装Bootstrap并使用其网格系统。 您的代码将如下所示：

<div class="row">
<div class="col-md-4">
     <a href="/careers/job_listing_4"><div class="content-tile">
     <p>Psychologist</p>
     <img src="/images/careers/location_pointer.png"/><p>Rock</p></a>
</div>
<div class="col-md-4">
     <a href="/careers/job_listing_1"><div class="content-tile">
     <p>Psychiatric Nurse Practitioner</p>
     <img src="/images/careers/location_pointer.png"/><p>Craw</p></a>
</div>
<div class="col-md-4">
     <a href="/careers/job_listing_2"><div class="content-tile">
     <p>Licensed Clinical Social Worker</p>
     <img src="/images/careers/location_pointer.png"/><p>Crawf</p></a>
</div>
</div>

现在，Bootstrap将为您处理响应。

答案 3 :(得分：0)

请尝试

<style>
.makeInline {
display: inline-block;
width: calc( 25% - 5px );
border: 1px solid red;
margin-bottom: 5px;
vertical-align: top;
}
</style>
<div class="makeInline">
<a href="/careers/job_listing_4">
<div class="content-tile">
<p>Psychologist</p>
<img src="/images/careers/location_pointer.png"/>
<p>Rock</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_1">
<div class="content-tile">
<p>Psychiatric Nurse Practitioner</p>
<img src="/images/careers/location_pointer.png"/>
<p>Craw</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_2">
<div class="content-tile">
<p>Licensed Clinical Social Worker</p>
<img src="/images/careers/location_pointer.png"/>
<p>Crawf</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_3">
<div class="content-tile">
<p>Licensed Clinical Social Worker</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_5">
<div class="content-tile">
<p>Dental Assistant</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_6">
<div class="content-tile">
<p>Bilingual Medical Receptionist</p>
<img src="/images/careers/location_pointer.png"/>
<p>Craw</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_7">
<div class="content-tile">
<p>Certified Medical Assistant/Licensed Practical Nurse</p>
<img src="/images/careers/location_pointer.png"/>
<p>Ter</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_8.php">
<div class="content-tile">
<p>Dental Office Coordinator</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_9">
<div class="content-tile">
<p>Call Center</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cli</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_10">
<div class="content-tile">
<p>Nurse Practitioner</p>
<img src="/images/careers/location_pointer.png"/>
<p>Blo</p>
</div>
</a> </div>

答案 4 :(得分：0)

我认为一个简单的网格系统会有所帮助，flexbox网格就是我在下面的小提琴中使用的：

https://jsfiddle.net/andrwrbnsn/xjt9Lhe7/82/

从本质上讲，这使您可以根据浏览器的宽度设置不同的宽度，这些宽度彼此相邻。

您的块不相邻的原因是，<div>是块级元素，如果设置display: inline-block，则它们将相邻。

相关问题
最新问题