【发布时间】：2016-04-19 05:20:35
【问题描述】：
我知道有人问过一些关于创建等高列的类似问题，但我没有使用表格，而只是在 CSS 中工作。我对 flexbox 做了很多研究，但我的代码不起作用。 我正在尝试使用媒体查询将文章放入两个或三个等宽的列中。使用此代码，它们将保留在一列中。我尝试这样做的方法是为容器设置最大宽度，然后将文章换行，但我无法让它工作。
<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 的 sn-p
/*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;
}
【问题讨论】：
-
你能更详细地描述目标吗？
-
我补充说我试图让文章分成两到三列等长。
-
弹性等高列功能仅适用于同级弹性项目。因此，如果您希望
article元素的高度相等，则将display: flex应用到它们的父级（#recent），这使它成为一个弹性容器。然后从article元素中删除height: 600px，因为它会覆盖等高列。更多详情：stackoverflow.com/a/33815389/3597276