代码之家 › 专栏 › 技术社区 › Karos papermoon

Div和定位问题

css-float css-selectors css html

-1

Karos papermoon · 技术社区 · 6 年前

我很难重现这个例子。结果是我做的一个没有正确对齐,我不知道如何循环注释框低于审查分数。谁能给我举个例子或解释一下这个布局?

示例图像:

这是我制作的,我使用背景色来查看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>

1 回复 | 直到 6 年前

Luffy 6 年前

我建议用桌子代替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将整个表包装起来,以制作背景和您想要的所有效果,但这取决于您的期望和需要。。) 或者,您可以使用两个表,使它们更容易满足您的需要。