어떻게 사진을 정렬합니까

나는 %로 놀려고했지만 사진은 나란히 앉아 있지 않고 서로 계속 클리핑됩니다. 각 사진을 서로 수평으로 나란히 놓으려는 것뿐입니다. 내가 잘못하고있는거야? 이것은 수정 쉽게 내 나쁜어떻게 사진을 정렬합니까

발췌문 경우 이렇게 코딩에 시 메신저 새로운 :

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 당신을 환영합니다! 원래 게시물에는 이미지의 '너비'와 '높이'크기가 없습니다. 그게 당신이 필요하면 그냥 코멘트를 여기에 게시하거나 원래 게시물에 추가 할 수 있고 그것을 살펴 보겠습니다. 아니면 내가 원하는지 알려주세요. –

예 나는 width = "500"height = "300"으로 HTML에 orignally 높이와 너비를 넣습니다. 그러나 그것은 어떤 이유로 변경되지 않을 것입니다. –

-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'을 소개한다. –

어떻게 사진을 정렬합니까

답변

관련 문제