2016-04-08 8 views
0

ロゴのイメージが見た目に似合っているイメージを付けました。ランディングページの問題

enter image description here

html { 
 
    background: #8CEEF9; 
 
    background: -webkit-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: -o-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: -moz-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: linear-gradient(#8CEEF9, #FFFFFF); 
 
} 
 

 
.logos { 
 
    display: inline-block; 
 
    max-width:45%; 
 
    margin:2%; 
 
    float:left; 
 
    text-align: center; 
 
}
<html> 
 
    <head> 
 
     <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <link href="main.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 
     <body> 
 
      <div class="logos"> 
 
       <img class="img-responsive 50" src="logos/main-logo.png"> 
 
       <img class="img-responsive 50" src="logos/logos.png"> 
 
      </div> 
 
      <div class="seperator"></div> 
 
      <div class="logos"> 
 
      </div> 
 
      <div class="cs"> 
 
       <h1>Coming Soon</h1> 
 
      </div> 
 
     </body> 
 
</html>

答えて

0

あなたはロゴクラスdisplay:inline-block;の内の画像を与える必要があるとロゴクラスをフロート状態にしないでください。

.logos img{ 
    display: inline-block; 
} 

html { 
 
    background: #8CEEF9; 
 
    background: -webkit-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: -o-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: -moz-linear-gradient(#8CEEF9, #FFFFFF); 
 
    background: linear-gradient(#8CEEF9, #FFFFFF); 
 
} 
 

 
.logos { 
 
    max-width:45%; 
 
    margin:2%; 
 
    text-align: center; 
 
} 
 

 
.logos img{ 
 
    display:inline-block; 
 
}
<html> 
 
    <head> 
 
     <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <link href="main.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 
     <body> 
 
      <div class="logos"> 
 
       <img class="img-responsive 50" src="logos/main-logo.png"> 
 
       <img class="img-responsive 50" src="logos/logos.png"> 
 
      </div> 
 
      <div class="seperator"></div> 
 
      <div class="logos"> 
 
      </div> 
 
      <div class="cs"> 
 
       <h1>Coming Soon</h1> 
 
      </div> 
 
     </body> 
 
</html>

関連する問題