0

我正在制作一个简单的布局作为网站的一部分。它有多个块，每个块都有相似的内容。这是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>

第二张图片的显示低于预期。是什么原因造成的，有没有办法解决它？

谢谢！

4

5 回答 5

0

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

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

要在标题右侧显示图像，您必须将图像的浮动样式交换为“float：right”并将图像放在h2标签之前。

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

http://jsfiddle.net/Xmujr/

我删除了大部分浮动指令，因为除了图像之外的任何东西都不需要它们。我还在图像中添加了一个类（左/右），以明确图像的显示位置。

高温高压

于 2012-10-03T13:51:37.293 回答
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_leftcss 类。

<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-03T13:44:51.790 回答
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-03T13:39:36.610 回答
0

您应该对float文本和图像使用 CSS：

<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-03T13:39:54.333 回答
0

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

于 2012-10-03T13:37:13.980 回答