0

Web サイトの一部として簡単なレイアウトを作成しています。複数のブロックがあり、それぞれが同様のコンテンツを持っています。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>

2 番目のイメージは、予想よりも低く表示されます。何が原因で、それを修正する方法はありますか?

ありがとうございました！

4

5 に答える 5

0

p 要素の上の 2 番目の div に img タグを配置してみてください。

于 2012-10-03T13:37:13.980 に答える
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

次のスタイル で<h2>内側の前に 2 番目の画像を追加します。<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 クラスを使用して同じことを達成することもできます。以下のコードでおよびcss クラスを
確認してください。to_rightto_left

<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

あなたのイメージと段落h2は で定義されfloat: leftます。pとはどちらもh2幅が固定されているため、2 つを 1 行に入れることはできず (580px*2 > 900px)、折り返されます。

ただし、画像は段落 (またはタイトル) の横に収まるため、同じ高さに表示されます。

画像をタイトルの右に表示するには、画像のフローティング スタイルを「float: right」に変更し、h2タグの前に画像を配置する必要があります。

ここで（クリーンアップされた）フィドルを見つけることができます：

http://jsfiddle.net/Xmujr/

float ディレクティブのほとんどは、イメージ以外には必要ないため、削除しました。また、画像が表示される場所を明確にするために、画像にクラス (左/右) を追加しました。

HTH

于 2012-10-03T13:51:37.293 に答える