どのように、それをHTML

Question

私は

がfloat: left;を使用して、これは助けにならないようにそれらに情報を表示します本体内の別のセクションを設定しようとしている中で、画像の右にテキストを配置しますページのレイアウトが壊れてしまいます。

ここに私のhtmlだ...ここ

<div Id="wrapper"> 
     <section> 
      <ul id="a"> 
      <li> 
       <a href="img/appstore.jpg"> 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
       <p>info</p> 
       </a> 
      </li> 
      </ul> 
     </section> 

     <section> 
      <ul id="g"> 
      <li> 
       <a href="img/googleplay.jpg"> 
       <img src="img/googleplay.jpg" alt="" width=180px id="pic"> 
       <p>info</p> 
       </a> 
      </li> 
      </ul> 
     </section> 
    </div> 

は私のCSSの...

#a, #g { 
    background-color: #6d6d6d; 
    color: #bdc3c7; 
    list-style: none; 
} 

#pic { 
    margin: +5% 0 0; 
    border: 3px solid black; 
} 

#wrapper { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 5%; 
  list-style: none; 
} 

Answer 1

使用してみてくださいfloat:right

#wrapper ul { 
 
    padding: 0; 
 
    margin: auto; 
 
    width: 80%; 
 
    list-style-type: none; 
 
} 
 

 
#wrapper ul li { 
 
    background-color: #6d6d6d; 
 
    padding: 30px; 
 
    margin-bottom: 20px; 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
#wrapper ul li img { 
 
    float: left; 
 
} 
 

 
#wrapper ul li .details {float: right;width: 75%;}

<div Id="wrapper"> 
 
     <section> 
 
      <ul id="a"> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
 
       <!-- Wrapped into div --> 
 
       <div class="details"> 
 
        <p>info</p> 
 
       </div> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
 
       <!-- Wrapped into div --> 
 
       <div class="details"> 
 
        <p>info</p> 
 
       </div> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
 
       <!-- Wrapped into div --> 
 
       <div class="details"> 
 
        <p>info</p> 
 
       </div> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
 
       <!-- Wrapped into div --> 
 
       <div class="details"> 
 
        <p>info</p> 
 
       </div> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px id="pic"> 
 
       <!-- Wrapped into div --> 
 
       <div class="details"> 
 
        <p>info</p> 
 
       </div> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </section> 
 
    </div>

Answer 2

イメージに同じIDの複数のインスタンスに同じ名前を使用しているのはなぜですか？ IDは一意でなければならないので、グループ化する場合はクラスを使用する方がよいでしょう。それはあなたに背景色を追加し、高さを設定する必要があるものだと私はセクションタグを分類

#a, #g { 
 
    color: #bdc3c7; 
 
    list-style: none; 
 
} 
 

 
.pic { 
 
    margin:+5% 0 0; 
 
    border: 3px solid black; 
 
    float:left; 
 
} 
 

 
.sections { 
 
    height:100px; 
 
    background-color: #6d6d6d; 
 
} 
 

 
.info { 
 
    margin:+5% 10px; 
 
    float:left; 
 
} 
 

 
#wrapper { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 0 5%; 
 
    list-style: none; 
 
}

<div Id="wrapper"> 
 
     <section class="sections"> 
 
      <ul id="a"> 
 
      <li> 
 
       <a href="img/appstore.jpg"> 
 
       <img src="img/appstore.jpg" alt="" width=180px class="pic"> 
 
       <p class="info">info</p> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </section> 
 

 
     <section class="sections"> 
 
     <ul id="g"> 
 
      <li> 
 
       <a href="img/googleplay.jpg"> 
 
       <img src="img/googleplay.jpg" alt="" width=180px class="pic"> 
 
       <p class="info">info</p> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </section> 
 
    </div>

1. ：あなたの質問のための私の解決策をチェックしてください。項目が浮動しているので高さを設定する必要があるため、セクションを自動的に伸ばしないので、固定された高さを指定する必要があります。

2. あなたの段落にもクラスを追加しました。これらの段落も、画像と同様に左に浮かべる必要があります。また、画像と同じマージンを追加する必要がありました。

3. 写真のIDをクラスに変更しました。

ご不明な点がありましたら、お知らせください。

Answer 3

class id = "pic" to class = "pic"。 IDは、ページ内の1時間...

を使用する必要があるため、その後、CSSで書く：

.pic { 
float: left; 
} 

Answer 4

は、私は少しあなたのコードとリスト物事を変え..私はあなたの質問を誤解している場合を教えてください。..

<html> 
    <head> 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
     <style> 
      #a, #g { 
       background-color: #6d6d6d; 
       color: #bdc3c7; 
       list-style: none; 
       width: 100%; 
      } 

      #pic { 
       margin: +5% 0 0; 
       border: 3px solid black; 
       display:table-cell; width:100px;height:100px; 
      } 

      #wrapper { 
       max-width: 1200px; 
       margin: 0 auto; 
       padding: 0 5%; 
       list-style: none; 
      } 
      section{ 
       width: 100%; 
      } 

     </style> 
    </head> 
    <body> 
     <div Id="wrapper"> 
      <section> 
        <a href="img/appstore.jpg" id="a"> 
        <div style="display:table" id="g"> 
         <div style="" id="pic"> 
          <img src="img/appstore.jpg" width=180px alt=""> 
         </div> 
         <div style="padding:12 16;"> 
          <p>info</p> 
         </div> 
        </div>  
        </a> 

      </section> 

      <section> 
       <a href="img/googleplay.jpg"> 
        <div style="display:table" id="g"> 
         <div style="" id="pic"> 
          <img src="img/googleplay.jpg" alt="" width=180px> 
         </div> 
         <div style="padding:12 16;"> 
          <p>info</p> 
         </div> 
        </div>  
       </a> 
      </section> 
     </div> 
    </body> 
</html>