如何 "align justified" 3 个响应式水平 DIV？

Question

对于一个小项目，我以响应式的方式创建了 3 个水平按钮。所以在宽屏幕上，按钮水平显示，并排显示。在较小的显示器上，按钮在 1 列中彼此下方很好地显示。

代码如下：

<style>
.row:after { 
  clear: both; 
}
.row:before, .row:after {
  content: " ";
  display: table; 
}   
@media (min-width: 900px) {
.col { 
  float: left;
  width: 27%; 
}
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 0.75vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 30px;
}
.button:hover {
  background: #458500;
 color: #FFFFFF !important;
  border: 4px solid #AFD283;
  text-decoration: none;
}
.buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
 font-weight:bold;
  color: #FFFFFF;
}
}
@media (max-width: 900px) {
.col { 
  width: 40%;
  margin: 0 auto;
}
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 2.5vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
}
.button:hover {
  background: #458500;
  border: 4px solid #AFD283;
  text-decoration: none;
}
.buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 30px;
  font-weight:bold;
  color: #FFFFFF;
}
}
</style>

<div class="row">
<div class="buttons col" >Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> Yvonne en Winy van der Geest </a></div>
<div class="buttons col" id="button2" >Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
<div class="buttons col" >Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

代码笔can be found here ...

我对小屏幕上的响应行为感到满意。但我希望水平显示 divs 在整个屏幕上“合理”，所以： -- 第一个div完全显示在左边； -- 第二个div显示在中间； -- 第三个 div 完全显示在右侧。当然，小屏幕上的响应行为应该保留。

非常感谢一些解决问题的建议。

Answer 1

试试这个：

@media (min-width: 900px) {

  .row{
    display:flex;
    justify-content:space-between;
  }
  ...
  ...
}

Answer 2

Display : column 当您必须水平放置项目时，不能解决您的问题，您必须使用 display:flex 为您的容器行和 flex-basis: 20% 为您的项目添加一些边距：

@media (min-width: 900px) {
.col { 
  float: left;
  width: 20%; 
}
  .row {
     display:flex;
    justify-content:space-between;
  }
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 0.75vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 30px;
}
.button:hover {
  background: #458500;
 color: #FFFFFF !important;
  border: 4px solid #AFD283;
  text-decoration: none;
}

.buttons {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
  text-align: center;
 font-weight:bold;
  color: #FFFFFF;
}
}

https://codepen.io/boutahlilsoufiane/pen/JjbrGeo

Answer 3

这是你想做的吗？

.row {
  text-align:justify;
  text-align-last:justify;
}
.col{
  text-align:center;
  text-align-last:center;
  display:inline-block; 
}

.button {
  display:block;
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: calc(8px + 0.25vw) ;
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none; 
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

如果是，则使用 inline-block 而不是 float ...但是现在，flex 可以使它变得简单。

.row {display:flex;
  justify-content:space-between;
}
.col{
  text-align:center; 
}

.button {
  display:block;
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: calc(8px + 0.25vw);/* keep a min size */
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none; 
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

最后，需要一个媒体查询来重置布局显示

.row {
  display: flex;
  justify-content: space-between;
}

.row:before,
.row:after {
  content: '';
  flex: 0.5;
}

.col {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.col:nth-child(1) {
  order: -1
}

.col:nth-child(3) {
  order: 1;
}

@media screen and (max-width:700px) {
  .row {
    flex-direction: column;
    max-width: max-content;
    margin: auto;
  }
}

.button {
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: verdana;
  font-weight: bold;
  color: #ffffff;
  font-size: calc(8px + 0.5vw);
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #bed3ec;
  background: #306bbb;
  text-decoration: none;
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

如何 "align justified" 3 个响应式水平 DIV？

how to to "align justified" 3 responsive horizontal DIVs?

html

css

layout

responsive