我知道在创建相同高度的列时会遇到一些类似的问题，但我没有使用表格，只是在CSS中工作。我已经对flexbox进行了大量研究，但我的代码无效。 我正在尝试使用Media Queries将文章放入两个或三个相等宽度的列中。使用此代码，它们保留在一列中。我尝试这样做的方法是为容器设置最大宽度，然后让文章换行，但我无法让它工作。
<div id="content"><!-- Start content -->
<div id="slide"> <img src="imgs/slide.jpg" alt="The University of Arizona " />
</div>
<section id="recent">
<article>
<a href="#"><img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" /></a>
<h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
<p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#"><img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" /></a>
<h1><a href="#">Ethics and the Bottom Line</a></h1>
<p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#"><img src="imgs/recent3.jpg" alt="From Fields to Fuel" /></a>
<h1><a href="#">From Fields to Fuel</a></h1>
<p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop. The work brings together students and professors, government and industry, and represents an education for all involved.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#"><img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" /></a>
<h1><a href="#">Rodriguez Era Begins</a></h1>
<p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
<a class="readMore" href="#">Read More</a>
</article>
</section>
这是我遇到问题的CSS片段
/*Keep header image large*/
#slide img
{
max-width: 400px;
padding-top:5%;
}
#recent {
overflow:auto;
}
#content {
margin:5%;
}
/*articles into two columns*/
#recent article, img
{
display: -webkit-flex;
display: flex;
flex-direction:column;
flex-wrap:wrap;
column-gap:3em;
margin:1%;
width:100%;
overflow:auto;
columns:3;
}
#recent article {
width:200px;
height:600px;
}
答案 0 :(得分：0)
试试这个：
（我已经复制了你上一篇文章，以证明这些列的对齐高度确实相同。）
突出显示更改：
display: flex;中的#recent，而不是#recent article, img align-items: stretch;是将列的高度设置为相同的内容。特别是它应该从上到下，除非有包裹。flex-basis: 33.3%;指定在分配任何剩余空间之前元素的默认大小。在您的情况下，您可以想象它只是指定列的大小。flex-direction: column，因为这实际上意味着您希望将它们堆叠在一起。
/*Keep header image large*/
#slide img {
max-width: 400px;
padding-top: 5%;
}
#content {
margin: 5%;
}
/*articles into two columns*/
#recent {
overflow: auto;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
#recent article {
flex-basis: 33.3%;
}
#recent article img {
margin: 2% auto;
}<div id="content">
<!-- Start content -->
<div id="slide">
<img src="imgs/slide.jpg" alt="The University of Arizona " />
</div>
<section id="recent">
<article>
<a href="#">
<img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" />
</a>
<h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
<p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA
and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" />
</a>
<h1><a href="#">Ethics and the Bottom Line</a></h1>
<p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide
teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent3.jpg" alt="From Fields to Fuel" />
</a>
<h1><a href="#">From Fields to Fuel</a></h1>
<p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop.
The work brings together students and professors, government and industry, and represents an education for all involved.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
</a>
<h1><a href="#">Rodriguez Era Begins</a></h1>
<p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
</a>
<h1><a href="#">Rodriguez Era Begins</a></h1>
<p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
</a>
<h1><a href="#">Rodriguez Era Begins</a></h1>
<p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
<a class="readMore" href="#">Read More</a>
</article>
</section>
Flexbox的良好参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
答案 1 :(得分：0)
您实际上包含了flexbox和css列的代码。我删除了flexbox，并添加了css列前缀。我没有columns使用column-width，而是如果视口的宽度更高，那么您将获得更多列。运行代码段后，尝试点击整页。
/*Keep header image large*/
#slide img {
max-width: 400px;
padding-top: 5%;
}
#content {
margin: 5%;
}
/*articles into two columns*/
#recent {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
margin: 1%;
width: 100%;
overflow: auto;
}
#recent article img {
margin: 2% auto;
}<div id="content">
<!-- Start content -->
<div id="slide">
<img src="imgs/slide.jpg" alt="The University of Arizona " />
</div>
<section id="recent">
<article>
<a href="#">
<img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" />
</a>
<h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
<p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA
and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" />
</a>
<h1><a href="#">Ethics and the Bottom Line</a></h1>
<p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide
teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent3.jpg" alt="From Fields to Fuel" />
</a>
<h1><a href="#">From Fields to Fuel</a></h1>
<p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop.
The work brings together students and professors, government and industry, and represents an education for all involved.</p>
<a class="readMore" href="#">Read More</a>
</article>
<article>
<a href="#">
<img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
</a>
<h1><a href="#">Rodriguez Era Begins</a></h1>
<p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
<a class="readMore" href="#">Read More</a>
</article>
</section>
</div>
答案 2 :(得分：0)
使用flex布局时，我总是回到本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您需要记住的最重要的事情是您需要将Flex代码应用于包装器，而不是元素。请看下面的示例：https://jsfiddle.net/cfez8hz2/
我将包装器上的css限制为flex所需的代码。文章的边距和背景只是为了让事物可见。宽度决定了一行中的项目数。
css并不难理解（您可能希望为旧版浏览器添加所需的前缀）：
#recent {
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-between;
align-items: stretch;
}
#recent article {
width: 45%;
margin: 20px 0;
background: #ccc;
}