私は写真をどのように整列するのですか

私は％で遊べようとしましたが、写真は横に並んで座っているのではなく、お互いに引き締まっています。ちょうど各写真を横に横に並べるようにしようとしています。私は間違っている？これは修正簡単に私の悪い私は写真をどのように整列するのですか

スニペットであればそうコーディングに Psのイム新しい：

body{ 
 
    margin:0 auto 0 auto; 
 
\t max-width: 750px; 
 
} 
 

 
li{ 
 
\t display:inline-block; 
 
\t width:25%; 
 
}

<div class="uno"> 
 
\t <li>Anime</li> 
 
\t <ol> 
 
\t \t <li> 
 
     <a href="http://cowboybebop.wikia.com/wiki/Main_Page"> 
 
     <img src="http://i.imgur.com/RmlPLKy.jpg" 
 
      alt="See you in space cowboy..." width="500" hight="500" 
 
       >Cowboy Bebop</li>` 
 
    
 
                        
 
\t 
 

 
     <li> 
 
    <a href="http://fma.wikia.com/wiki/Main_Page"> 
 
     <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" 
 
     alt="Best Alchemist" width="500" hight="500" 
 
     >Full Metal Alchemist</li> 
 

 
\t 
 
    <li> 
 
     <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing"> 
 
      <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500" 
 
        >Gundam Wing</li> 
 

 
\t \t 
 

 
    
 
\t \t 
 

 
    <li> 
 
      <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki"> 
 
      <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" 
 
      alt="Jin Fuu Mugen" width="500" hight="500" 
 
       >Samurai Champloo</a></li> 
 
\t </ol></div>

出典

2017-09-10 Howard Jackson

私はolにdisplay: flex;を行うだろう。また無効なマークアップにするリスト内の<a>を閉じなかった。

.uno-list { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.uno-list li { 
 
    flex-basis: 25%; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
    background-color: deeppink; 
 
} 
 

 
.uno-list a { 
 
    display: block; 
 
} 
 

 
.uno-list img { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 0; 
 
}

<div class="uno"> 
 
    <ol class="uno-list"> 
 
    <li> 
 
     <a href="http://cowboybebop.wikia.com/wiki/Main_Page"> 
 
     <img src="http://i.imgur.com/RmlPLKy.jpg" alt="See you in space cowboy..." width="500" hight="500"> Cowboy Bebop</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="http://fma.wikia.com/wiki/Main_Page"> 
 
     <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" alt="Best Alchemist" width="500" hight="500"> Full Metal Alchemist 
 
     </a> 
 
    </li> 
 

 

 
    <li> 
 
     <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing"> 
 
     <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500"> Gundam Wing 
 
     </a> 
 
    </li> 
 

 

 
    <li> 
 
     <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki"> 
 
     <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" alt="Jin Fuu Mugen" width="500" hight="500">Samurai Champloo</a> 
 
    </li> 
 
    </ol> 
 
</div>

出典

2017-09-10 15:28:59

これは完璧に機能しました。唯一のことは、サイズが元のサイズに戻ったことです。私は幅と高さの設定で演奏しましたが、前と同じサイズに戻ることはありません。助言がありますか？ –

@HowardJacksonようこそ！オリジナルの投稿では、画像の「幅」と「高さ」のサイズはありません。それが必要な場合は、ここでコメントに投稿したり、元の投稿に追加したりしてみてください。または、あなたがそれをどのようにしたいかを教えてください。 –

はい私はorignally width = "500" height = "300"としてHTMLに高さと幅を入れますが、それは何らかの理由で変更されません。 –

-1

あなたのイメージが水平にお互いの隣に座って見たい場合は、「shouldn （max-width: 750px;）のように非常に短い幅を使用し、リストに配置する必要はありません。だからここにあなたのコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
    a{ 
     float: left; 
    } 
    </style> 
</head> 
<body> 
    <div class="uno"> 
     <a href="http://cowboybebop.wikia.com/wiki/Main_Page"> 
     <img src="http://i.imgur.com/RmlPLKy.jpg" 
      alt="See you in space cowboy..." width="500" hight="500" 
       >Cowboy Bebop</a> 
    <a href="http://fma.wikia.com/wiki/Main_Page"> 
     <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" 
     alt="Best Alchemist" width="500" hight="500" 
     >Full Metal Alchemist</a> 

     <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing"> 
      <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500" 
        >Gundam Wing</a> 

      <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki"> 
      <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" 
      alt="Jin Fuu Mugen" width="500" hight="500" 
       >Samurai Champloo</a> 
    </div> 
</body> 
</html> 
<body>

出典

2017-09-10 15:24:49

あなたは本当にこの例をやって 'clearfix'を導入すべきです。 –

私は写真をどのように整列するのですか

答えて

関連する問題