水平对齐3个元素的3个元素 [英] Align horizontally 3 elements over 3 divs

查看：158
本文介绍了水平对齐3个元素的3个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有三篇文章，每篇都有一个标题，一个描述和一个链接列表。内容的数量总是不一样，3个元素的高度是未知的。我正在尝试使用flexbox将相应的水平对齐。任何人都可以帮忙
下面是一个例子：

 < html> 
< head> 
< title>水平对齐< / title> 
< style type =text / css> 
 
 * {
 margin：0; 
 padding：0; } 
 
 li {
 list-style：none; } 
 
 * {
 box-sizing：border-box; } 
 
 .item-container {
 display：flex; 
 flex-wrap：wrap; } 
 
 .item {
 width：33.3％; 
 border：1px黑色; 
 display：flex; 
 flex-direction：column; } 
 
 .item-title {
 background：red; 
 flex：1 0 auto; } 
 
 .item-description {
 background：orange; } 
 
 .item-links {
 background：yellow; } 
 
< / style> 
< / head> 
< body> 
< section class =item-container> 
< div class =item> 
< h2 class =item-title> Lorem ipsum dolor sit amet< / h2> 
< p class =item-description> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 < / p为H. 
< ul class =item-links> 
< li>连结A< / li> 
< li>连结B< / li> 
< li>连结C< / li> 
< li>连结D< / li> 
< li>连结E< / li> 
< li>连结F< / li> 
< / ul> 
< / div> 
< div class =item> 
< h2 class =item-title> Lorem ipsum dolor坐在amet，consectetuer adipiscing elit。 < / H2> 
< p class =item-description> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> 
< ul class =item-links> 
< li>连结A< / li> 
< li>连结B< / li> 
< li>连结C< / li> 
< / ul> 
< / div> 
< div class =item> 
< h2 class =item-title> Lorem ipsum dolor sit amet< / h2> 
< p class =item-description> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 < / p为H. 
< ul class =item-links> 
< li>连结A< / li> 
< li>连结B< / li> 
< / ul> 
< / div> 
< / section> 
 
< / body> 
< / html>

Copepen



非常感谢！

解决方案

通过对标记进行微小的更改，删除< div class =item> wrapper，可以这样做。



在这里，我使用命令属性重新排序/分组 item-title ， item-description 和 item-links 他们将在每一行上有相同的高度。

根据评论和媒体查询进行更新



* {margin：0; padding：0;} li {list-style：none;} * {box-sizing：border-box;}。item-container {display：flex; flex-wrap：wrap;}。item-container> * {宽度：100％; item-links {background：yellow;} @ media screen和（min-width：700px）{。 item-container> * {宽度：33.3％; } .item-container> h2 {order：1; } .item-container> p {order：2; } .item-container> ul {order：3; }

< section class =item-container > < h2 class =item-title> 1 Lorem ipsum dolor sit amet< / h2> < p class =item-description> 1 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> < ul class =item-links> < li> 1连结A< / li> < li>连结B< / li> < li>连结C< / li> < li>连结D< / li> < li>连结E< / li> < li>连结F< / li> < / UL> < h2 class =item-title> 2 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 < / H2> < p class =item-description> 2 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> < ul class =item-links> < li> 2连结A< / li> < li>连结B< / li> < li>连结C< / li> < / UL> < h2 class =item-title> 3 Lorem ipsum dolor sit amet< / h2> < p class =item-description> 3 Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> < ul class =item-links> < li> 3连结A< / li> < li>连结B< / li> < / section>


I have 3 articles in a row that have each a title, a description and a link list. The amount of content is always different, heights of the 3 elements are unknown. I am trying to align the corresponding ones horizontally to each other using flexbox. Anyone can help? Here's an example:

<html>
<head>
    <title>Horizontal Alignment</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0; }

        li {
            list-style: none; }

        * {
            box-sizing: border-box; }

        .item-container {
            display: flex;
            flex-wrap: wrap; }

        .item {
            width: 33.3%;
            border: 1px dashed black;
            display: flex;
            flex-direction: column; }

        .item-title {
            background: red;
            flex: 1 0 auto; }

        .item-description {
            background: orange; }

        .item-links {
            background: yellow; }

    </style>
</head>
<body>
    <section class="item-container">
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet</h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
                <li>Link C</li>
                <li>Link D</li>
                <li>Link E</li>
                <li>Link F</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
                <li>Link C</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet</h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
            </ul>
        </div>
    </section>

</body>
</html>

Copepen

Thanks a lot!

解决方案

By making a minor change in your markup, removing the <div class="item"> wrapper, you can do like this.

Here I used the order property to re-order/group the item-title, item-description, and item-links in a top, middle and bottom block, and as such they will have equal heights on each row.

Updated based on a comment, with a media query

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
* {
  box-sizing: border-box;
}
.item-container {
  display: flex;
  flex-wrap: wrap;
}
.item-container > * {
  width: 100%;
  border: 1px dashed black;
}
.item-title {
  background: red;
}
.item-description {
  background: orange;
}
.item-links {
  background: yellow;
}

@media screen and (min-width: 700px) {

  .item-container > * {
    width: 33.3%;
  }

  .item-container > h2 {
    order: 1;
  }
  .item-container > p {
    order: 2;
  }
  .item-container > ul {
    order: 3;
  }

}

<section class="item-container">

  <h2 class="item-title">1 Lorem ipsum dolor sit amet</h2>
  <p class="item-description">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>1 Link A</li>
    <li>Link B</li>
    <li>Link C</li>
    <li>Link D</li>
    <li>Link E</li>
    <li>Link F</li>
  </ul>
  
  <h2 class="item-title">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
  <p class="item-description">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>2 Link A</li>
    <li>Link B</li>
    <li>Link C</li>
  </ul>

  <h2 class="item-title">3 Lorem ipsum dolor sit amet</h2>
  <p class="item-description">3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>3 Link A</li>
    <li>Link B</li>
  </ul>
</section>

这篇关于水平对齐3个元素的3个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆