Current picture
Goal picture
我试图移动这个元素以适应flex-body的底部。我已经尝试了一堆解决方案，但这是我能够让它甚至部分向下移动的唯一方法。任何有关调试的帮助都很有价值。谢谢！我正在讨论的元素在CSS中称为#bottom。
html {
background-image: url(images/moviebg.png);
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
padding: 0;
}
header {
background-image: url(images/rancidbannerbg.png);
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#page-heading {
text-align: center;
font-size: 24pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
text-shadow: 3px 3px #999999;
margin-top: 72px;
}
#flex-body {
width: 800px;
display: flex;
flex-flow: column;
flex-direction: row;
border-radius: 20px;
box-shadow: 5px 5px 5px grey;
box-sizing: border-box;
margin: auto;
}
#leftSectionHead {
height: 83px;
background-image: url(images/rottenlargebg.png);
background-repeat: repeat-x;
vertical-align: text-bottom;
}
#overallRating {
color: red;
font-size: 48pt;
font-weight: bold;
vertical-align: top;
overflow: hidden;
}
#reviewColumn {
flex-flow: column;
order: 0;
width: 550px;
background-color: #EEEEEE;
}
#reviewsA,
#reviewsB {
width: 47%;
flex-flow: row wrap;
}
#reviewsB {
float: right;
padding-right: 2%;
}
#reviewsA {
float: left;
padding-left: 2%;
}
#reviewsA img,
#reviewsB img {
float: left;
margin-right: 5px;
width: 20px;
}
#reviewsA .review::before,
#reviewsA .review::after {
content: "";
display: table;
clear: both;
}
#reviewsB .review::before,
#reviewsB .review::after {
content: "";
display: table;
clear: both;
}
.review {
font-size: 10pt;
background-color: #FFFFFF;
border-color: #CCCCCC;
border: solid 2px;
border-radius: 20px;
font-family: Georgia, "Times New Roman", serif;
padding: 8px;
margin-top: 20pt;
}
.publication {
font-style: italic;
}
.reviewer>img {
float: left;
margin-right: 5px;
}
#overviewContent {
width: 240px;
background-color: #A2B964;
padding: 10pt;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
}
#overviewColumn {
flex-flow: column;
order: 1;
}
#overviewPic {
width: 100%;
height: 100%;
}
dt {
font-weight: bold;
margin-top: 10pt;
}
ul {
list-style-type: none;
padding: 0;
}
#validators {
text-align: right;
opacity: .5;
position: sticky;
bottom: 0;
}
#bottom {
text-align: center;
background-color: #A2B964;
clear: both;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
}<header>
<img src="images/rancidbanner.png" alt="Rancid Tomatoes" />
</header>
<h1 id="page-heading">TMNT (2007)</h1>
<div id="flex-body">
<div id="overviewColumn">
<div>
<img id="overviewPic" src="images/overview.png" alt="general overview" />
</div>
<dl id="overviewContent">
<dt>STARRING</dt>
<dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
</ul>
</dd>
</dl>
</div>
<div id="reviewColumn">
<div id="leftSectionHead">
<img src="images/rottenlarge.png" alt="Rotten" />
<span id="overallRating"> 33% </span>
</div>
<div id="reviewsA">
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Peter Debruge <br />
<span class="publication"> Variety </span>
</p>
<p class="review">
<img src="images/fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Todd Gilchrist <br />
<span class="publication">IGN Movies </span>
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Jay Sherman (unemployed)
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Joshua Tyler <br />
<span class="publication">CinemaBlend.com</span>
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>Turtles should be cooked, not talking! Clearly a cooking failure</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Gordon Ramsey <br />
<span class="publication"> Hell's Kitchen</span>
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Jeannette Catsoulis <br />
<span class="publication"> New York Times</span>
</p>
</div>
<div id="reviewsB">
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Ed Gonzalez <br />
<span class="publication">Slant Magazine </span>
</p>
<p class="review">
<img src="images/fresh.gif" alt="Fresh" />
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Mark Palermo <br />
<span class="publication">Coast (Halifax, Nova Scotia) </span>
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Steve Rhodes <br />
<span class="publication">Internet Reviews </span>
</p>
<p class="review">
<img src="images/rotten.gif" alt="Rotten" />
<q>Turtles were punched!! This is an unacceptable case of animal abuse! I AM CALLING MY LAWYERS AS WE SPEAK!</q>
</p>
<p class="reviewer">
<img src="images/critic.gif" alt="Critic" /> Bill Bob <br />
<span class="publication">Sierra Club </span>
</p>
</div>
<div id="bottom">
<span>(1-10) of 88 </span>
</div>
</div>
</div>
<div id="validators">
<a href="https://validator.w3.org/nu/"><img src="images/w3c-html.png" alt="Valid HTML5" /></a><br />
<a href="https://jigsaw.w3.org/css-validator/#validate_by_uri+with_options"><img src="images/w3c-css.png" alt="Valid CSS" /></a>
</div>
答案 0 :(得分：0)
I think the best solution is to re-organize some of your markup. Move the element that you're trying to align to the bottom of another out of the column and place it after both.
Your example shows when there's less content in the left column than the right, what if it's the other way around? This will handle that situation also.
.container {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
box-shadow: 2px 2px 2px 0 rgba( 0, 0, 0, 0.35 );
}
.container .content {
display: flex;
flex-direction: row;
}
.container .content > div {
flex-basis: 50%;
}
.container .header {
text-align: center;
}
.container .reviews {
background-color: lightgray;
}
.container .header,
.container .info,
.container .footer {
background-color: olive;
}
.container .footer {
text-align: center;
}<div class="container">
<div class="header">Top</div>
<div class="content">
<div class="reviews">Left</div>
<div class="info">Right RightRight Right Right Right Right Right Right Right Right Right Right Right Right Right Right RightRight Right Right Right Right Right Right Right Right Right Right Right Right Right</div>
</div>
<div class="footer">Bottom</div>
</div>答案 1 :(得分：-1)
您是否尝试过align-self选项？
#bottom {
align-self: flex-end;
}