1. 首页
  2. 问答
  3. css float问题：block正被'推'下来？

css float问题：block正被'推'下来？

2012-10-03 40 views
0

我正在做一个简单的布局作为网站的一部分。它有多个块，每个块都有相似的内容。这里的html/css：css float问题：block正被'推'下来？

<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>

第二个图像显示比预期的要低。这是什么原因导致的，有没有办法解决这个问题？

谢谢！

来源

2012-10-03 koenAhn

回答

0

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

来源

2012-10-03 13:37:13

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>

来源

2012-10-03 13:39:36 Rayshawn

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>

来源

2012-10-03 13:39:54

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>

来源

2012-10-03 13:44:51

0

你的形象，以及段落和h2与float: left定义。 由于p和h2都有固定的宽度，所以不能将其中的两个放在一行（580px * 2> 900px）中，以便它们换行。

但是，图片会放在段落（或标题）的旁边，因此它将显示在相同的高度。

要在标题上显示图像，您必须将图像的浮动样式替换为“float：right”，然后将图像放在h2标签之前。

你可以在这里找到（清理后）小提琴：

http://jsfiddle.net/Xmujr/

我删除了大部分的浮动指令，因为它们不需要对除了图像什么。我还为图像添加了一个类（左/右），以清楚显示图像的显示位置。

HTH

来源

2012-10-03 13:51:37 Mark

相关问题

 相关问题