css float问题：块被'推'下来？

时间：2012-10-03 13:33:49

标签： css image layout

我正在制作一个简单的布局作为网站的一部分。它有多个块，每个块都有相似的内容。这是html / css：

<html>
    <head>
        <style> 
            .content {
                width: 900px;
                display: block;
                overflow: hidden;
                padding: 10px;
                background: #fea;
                margin: 20px;
            }
            h2, p {
                display: block;
                width: 580px;
            }
            img {
                background: white;
                padding: 5px;
                width: 270px;
                height: 330px;
            }
            h2, p, img {
                display:block;
                float: left;
                margin-left: 10px;
                margin-right: 10px;
            }

        </style>
    </head>
    <body>
        <div class='content'>
            <img class='auto' src='img/test.jpg' alt='test image' />
            <h2>Title one</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation. 
            </p>
            <p>
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class='content'>
            <h2>Title two</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation. 
            </p>
            <p>
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat <a href='#'>cupidatat non proident</a>, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <img class='auto' src='img/test.jpg' alt='test image' />
        </div>
    </body>
</html>

第二张图像显示低于预期。是什么导致这种情况，有没有办法解决它？

谢谢！

5 个答案:

答案 0 :(得分：0)

尝试将img标记放在p元素上方的第二个div中。

答案 1 :(得分：0)

调整你的HTML ...... 

 <html>
 <head>
 <style> 

.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
 display: block;
 width: 580px;
 }
  img {
   background: white;
   padding: 5px;
   width: 270px;
   height: 330px;
     }
 h2, p, img {
 display:block;
 float: left;
 margin-left: 10px;
 margin-right: 10px;
 }

 </style>
 </head>
 <body>

 <div class='content'>

<img class='auto' src='img/test.jpg' alt='test image' />

<h2>Title one</h2>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation. 
</p>

<p>
    ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>

  </div>


  <div class='content'>
 <img class='auto' src='img/test.jpg' alt='test image' />
 <h2>Title two</h2>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation. 
</p>

 <p>
    ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat <a href='#'>cupidatat non proident</a>, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>



 </div>

 </body></html>

答案 2 :(得分：0)

您应该使用CSS来float您的文字和图片：

<html> 
<head> 
<style>  

.left {
float:left;
}

.right {
float:right;
}

.content { 
  width: 900px; 
  display: block; 
  overflow: hidden; 
  padding: 10px; 
  background: #fea; 
  margin: 20px; 
} 
h2, p { 
  display: block; 
  width: 580px; 
} 
img { 
  background: white; 
  padding: 5px; 
  width: 270px; 
  height: 330px; 
} 
h2, p, img { 
  display:block; 
  float: left; 
  margin-left: 10px; 
  margin-right: 10px; 
} 

</style> 
</head> 
<body> 

<div class='content'> 

    <div class="left">
    <img class='auto' src='img/test.jpg' alt='test image' /> 
    </div>

    <div class="right">
    <h2>Title one</h2> 

    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
        sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.  
        Ut enim ad minim veniam, quis nostrud exercitation.  
    </p> 

    <p> 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.  
        Duis aute irure dolor in reprehenderit in voluptate velit  
        esse cillum dolore eu fugiat nulla pariatur.  
    Excepteur sint occaecat cupidatat non proident,  
    sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>
</div> 

</div> 


<div class='content'> 

    <div class="right">
    <img class='auto' src='img/test.jpg' alt='test image' />
    </div>

    <div class="left">
    <h2>Title two</h2> 

    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
        Ut enim ad minim veniam, quis nostrud exercitation.  
    </p> 

    <p> 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.  
        Duis aute irure dolor in reprehenderit in voluptate velit  
        esse cillum dolore eu fugiat nulla pariatur.  
        Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,  
        sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </p> 
 </div>

</div> 

</body></html>

答案 3 :(得分：0)

使用以下样式在<h2>内<div class="content">之前添加第二张图片：

<div class='content'>
 <img class='auto' src='img/test.jpg' alt='test image' style="float:right;"/>
 <h2>Title two</h2>

 <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation. 
 </p>

 <p>
    ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat <a href='#'>cupidatat non proident</a>, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
</div>

修改
或者您可以使用css类来实现相同的目标：
请查看以下代码中的to_right和to_left css类。

<html>
<head>
<style> 
     .content {
       width: 900px;
       display: block;
       overflow: hidden;
       padding: 10px;
       background: #fea;
       margin: 20px;
     }
     h2, p {
       display: block;
       width: 580px;
     }
     img {
       background: white;
       padding: 5px;
       width: 270px;
       height: 330px;
     }
     .to_right{float:right;}
     .to_left {float:left;}

     h2, p, img {
       display:block;  
       margin-left: 10px;
       margin-right: 10px;
     }

     </style>
     </head>
     <body>

     <div class='content'>

         <img src='img/test.jpg' alt='test image' class="auto to_left"/>

         <h2>Title one</h2>

         <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
             sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna                        aliqua. 
             Ut enim ad minim veniam, quis nostrud exercitation. 
         </p>

         <p>
             ullamco laboris nisi ut aliquip ex ea commodo consequat. 
             Duis aute irure dolor in reprehenderit in voluptate velit 
             esse cillum dolore eu fugiat nulla pariatur. 
         Excepteur sint occaecat cupidatat non proident, 
         sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>

     </div>


     <div class='content'>
        <img src='img/test.jpg' alt='test image' class="auto to_right"/>
         <h2>Title two</h2>

         <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             Ut enim ad minim veniam, quis nostrud exercitation. 
         </p>

         <p>
             ullamco laboris nisi ut aliquip ex ea commodo consequat. 
             Duis aute irure dolor in reprehenderit in voluptate velit 
             esse cillum dolore eu fugiat nulla pariatur. 
             Excepteur sint occaecat <a href='#'>cupidatat non proident</a>, 
             sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

     </div>
     </body></html>

答案 4 :(得分：0)

您的图片以及段落和h2都是使用float: left定义的。 由于p和h2都有固定宽度，因此您不能将其中两个放入一行（580px * 2> 900px），因此它们会换行。

但是，图像将适合段落（或标题），因此它将以相同的高度显示。

要将图像显示在标题上，您必须将图像的浮动样式换成“浮动：向右”，然后将图像放在h2标记之前。

你可以在这里找到一个（清理过的）小提琴：

http://jsfiddle.net/Xmujr/

我删除了大多数浮点指令，因为除了图像之外的任何其他指令都不需要它们。我还在图像中添加了一个类（左/右），以清楚显示图像的位置。

HTH

相关问题
最新问题