0
私はこの記事の一番下の図のようなレイアウトをしたいと思います。
しかし、私のコードは動作しません。
各列は、左のセクション全体の幅の47％を占めます。
列と隣接するコンテンツの間に2％の水平間隔があります。
このレイアウトをCSSの新しい列プロパティなしで作成したいと思います。
レビューの間に縦横のスペースが20pt必要です。 上記のコードを変更または追加する方法。CSSの添付写真のようにレイアウトのための私のコードを変更する方法
div#wrap {
width: 800px;
margin: 0 auto;
/*skipped border style*/
overflow: hidden;
}
#left {
width: 550px;
height: inherit;
}
div.reviews {
font-size: 8pt;
margin-left: 2%;
}
div.review {
width: 47%;
margin-right: 2%;
margin-bottom: 20pt;
overflow: hidden;
float: left;
}
div.review img {
margin-right: 5px;
float: left;
}
div.review p:nth-child(odd) {
font-weight: bold;
padding: 8px;
overflow: hidden;
}
div.reviews p:nth-child(odd) {
background-color: #E8DC9B;
/*skipped border style*/
}<div id="wrap">
<div id="left">
<div id="rate" class="center">
<img src="rottenbig.png" alt="Rotten" /> 33%
</div>
<div class="reviews">
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Peter Debruge <br /> Variety
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Jeannette Catsoulis <br /> New York Times
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Todd Gilchrist <br /> IGN Movies
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Joshua Tyler <br /> CinemaBlend.com
</p>
</div>
<div class="review">
<p>
<img src="rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p>
<img src="critic.gif" alt="Critic" /> Jay Sherman (unemployed)
</p>
</div>
<div class="review">
<p>
<img src="fresh.gif" alt="Rotten" />
<q>Loved it! I'm into turtles and ninjas.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" /> Leo Rafael <br /> HY PetShop Ltd.
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Ed Gonzalez <br /> Slant Magazine
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Mark Palermo <br /> Coast (Halifax, Nova Scotia)
</p>
</div>
<div class="review">
<p>
<img src="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>
<img src="critic.gif" alt="Critic" /> Steve Rhodes <br /> Internet Reviews
</p>
</div>
<div class="review">
<p>
<img src="rotten.gif" alt="Rotten" />
<q>Don't really like it!</q>
</p>
<p>
<img src="critic.gif" alt="Critic" /> Scott Lee <br /> SELab
</p>
</div>
</div>
</div>
<div>
<img id="poster" src="overview.png" alt="general overview" />
</div>
<dl>
<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>
<p>(1-10) of 88</p>
</div>
作業コードを提供できますか？ –
私の答えを確認してください。 –