Question

我很难尝试重新创建这个例子。原来我制作的那个没有正确对齐，我无法弄清楚如何循环评论框根据评论得分。任何人都可以给我一个例子或解释这个布局吗？

示例图片：

这是我制作的内容，我使用背景颜色来查看div框。

以下是代码：

* {
  box-sizing: border-box;
}

body {
  background-image: url("background.png");
  font-family: Tahoma;
  font-size: 8px;
}

.banner {
  margin-left: auto;
  margin-right: auto;
  background-image: url("bannerbackground.png");
  background-repeat: repeat;
}

H1 {
  font-family: Tahoma;
  font-size: 24px;
  text-align: center;
}

DL {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}

DT {
  float: left;
  width: 50%;
  background: #cc0;
  padding: 0;
  margin: 0
}

DD {
  float: left;
  width: 50%; //background: #dd0
  padding: 0;
  margin: 0
}

.overview {
  display: table;
  margin: 0 auto;
  float: right;
  background-color: red;
}

.everything review {
  border-style: solid;
  border-width: 4px;
  border-color: grey;
}

.review p {
  float: left;
  display: block;
  background-color: blue;
  margin: 0px 10px 0px 0px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">

  <HEAD>
    <TITLE>TMNT - Rancid Tomatoes</TITLE>
    <META content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <LINK rel="stylesheet" type="text/css" href="movie.css">
  </HEAD>

  <BODY>
    <DIV class="banner">
      <IMG alt="Rancid Tomatoes" src="images/banner.png" align="middle">
    </DIV>
    <H1>TMNT (2007)</H1>
    <DIV class="everything" align="center">
      <DIV class="overview">
        <IMG alt="general overview" src="images/generaloverview.png">
        <DL>
          <DT>STARRING</DT>
          <DD>Mako
            <BR> Sarah Michelle Gellar</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>GENRE</DT>
          <DD>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</DD>
          <DT>OFFICIAL MOVIE SITE</DT>
          <DD>
            <A href="http://www.tmnt.com/">The Official TMNT Site</A>
          </DD>
        </DL>
      </DIV>
      <DIV class="review">
        <DIV>
          <IMG alt="Rotten" src="images/rottenbig.png"> 32% (88 reviews total) </DIV>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <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 alt="Critic" src="images/critic.gif"> Peter Debruge
          <BR> Variety </P>
        <P>
          <IMG alt="Fresh" src="images/fresh.gif">
          <Q>TMNT is a fun, 
action-filled adventure that will satisfy longtime fans and generate a legion of 
new ones.</Q>
        </P>
        <P>
          <IMG alt="Critic" src="images/critic.gif"> Todd Gilchrist
          <BR> IGN Movies </P>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <Q>It stinks!</Q>
        </P>
        <P>
          <IMG alt="Critic" src="images/critic.gif"> Jay Sherman (unemployed)
        </P>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <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 alt="Critic" src="images/critic.gif"> Joshua Tyler
          <BR> CinemaBlend.com </P>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <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 alt="Critic" src="images/critic.gif"> Jeannette Catsoulis
          <BR> New York Times </P>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <Q>Impersonally animated 
and arbitrarily plotted, the story appears to have been made up as the 
filmmakers went along.</Q>
        </P>
        <P>
          <IMG alt="Critic" src="images/critic.gif"> Ed Gonzalez
          <BR> Slant Magazine </P>
        <P>
          <IMG alt="Fresh" src="images/fresh.gif">
          <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 alt="Critic" src="images/critic.gif"> Mark Palermo
          <BR> Coast (Halifax, Nova Scotia) </P>
        <P>
          <IMG alt="Rotten" src="images/rotten.gif">
          <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 alt="Critic" src="images/critic.gif"> Steve Rhodes
          <BR> Internet Reviews </P>
        <P>(1-8) of 88</P>
      </div>
    </DIV>
    <DIV>
      <A href="http://validator.w3.org/check/referer">
        <IMG alt="Valid XHTML 1.1" src="images/w3c-xhtml.png">
      </A>
      <BR>
      <A href="http://jigsaw.w3.org/css-validator/check/referer">
        <IMG alt="Valid CSS!" src="images/w3c-css.png">
      </A>
    </DIV>
  </BODY>

</HTML>

Answer 1

我建议使用表而不是div。这样你就可以很容易地得到上述结果。例如：

<table id="theentiretable">
<tr>
  <td class="topleftgreen">information here</td>
  <td class="toprightblack">information here">
</tr>
<tr>
  <td class="textandquotes">information here</td>
  <td class="posterimg>information here</td>
</tr>
<tr>
  <td>any other information here</td>
</tr>
</table>

通过这种方式，您可以使用您想要的任何风格制作td，并且您将所有上述内容放在一张桌子中，让您的生活更轻松。现在，您可以使用div包装整个表格，以制作背景和所需的所有效果，但这符合您的期望和需求。 ;）或者，您可以使用两个表格来更轻松地满足您的需求。

分组和定位问题

1 个答案: