1. ホーム
  2. 質問と答え
  3. 画像をインラインで表示

画像をインラインで表示

2017-07-02 2 views
0

私はデータベースから画像を取得したが、インラインで表示されていないことを尋ねたがっています。ありがとう！ 画像は正しく表示されていますが、同じ問題が繰り返し発生します。私は、彼らがインラインで表示するが、現在は1の画像をインラインで表示

enter code here 
<?php 
    include 'navbar.php'; 
    require_once('admin/connect.php'); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Couture Collection</title> 
      <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
<?php 
include 'middle.php'; 
?> 
<br> 
<style type="text/css"> 
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); 
body { 
    color: #333; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 
h1, 
h1+p { 
    margin: 30px 15px 0; 
    font-weight: 300; 
} 
h1+p a { 
    color: #333; 
} 
h1+p a:hover { 
    text-decoration: none; 
} 
h2 { 
    margin: 60px 15px 0; 
    padding: 0; 
    font-weight: 300; 
} 
h2 span { 
    margin-left: 1em; 
    color: #aaa; 
    font-size: 85%; 
} 
.column { 
    margin: 15px 15px 0; 
    padding: 0; 
} 
.column:last-child { 
    padding-bottom: 60px; 
} 
.column::after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.column div { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 200px; 
    margin: 0 0 0 25px; 
    padding: 0; 
} 
.column div:first-child { 
    margin-left: 0; 
} 
.column div span { 
    position: absolute; 
    bottom: -20px; 
    left: 0; 
    z-index: -1; 
    display: block; 
    width: 300px; 
    margin: 0; 
    padding: 0; 
    color: #444; 
    font-size: 18px; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    opacity: 0; 
} 
figure { 
    width: 300px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    overflow: hidden; 
} 
figure:hover+span { 
    bottom: -36px; 
    opacity: 1; 
} 



/* Zoom In #1 */ 
.hover01 figure img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover01 figure:hover img { 
    -webkit-transform: scale(1.3); 
    transform: scale(1.3); 
} 

/* Zoom In #2 */ 
.hover02 figure img { 
    width: 300px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 

} 
.hover02 figure:hover img { 
    width: 350px; 
} 

/* Zoom Out #1 */ 
.hover03 figure img { 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover03 figure:hover img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

/* Zoom Out #2 */ 
.hover04 figure img { 
    width: 400px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover04 figure:hover img { 
    width: 300px; 
} 

/* Slide */ 
.hover05 figure img { 
    margin-left: 30px; 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover05 figure:hover img { 
    margin-left: 0; 
} 

/* Rotate */ 
.hover06 figure img { 
    -webkit-transform: rotate(15deg) scale(1.4); 
    transform: rotate(15deg) scale(1.4); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover06 figure:hover img { 
    -webkit-transform: rotate(0) scale(1); 
    transform: rotate(0) scale(1); 
} 

/* Blur */ 
.hover07 figure img { 
    -webkit-filter: blur(3px); 
    filter: blur(3px); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover07 figure:hover img { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
} 

/* Gray Scale */ 
.hover08 figure img { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover08 figure:hover img { 
    -webkit-filter: grayscale(0); 
    filter: grayscale(0); 
} 

/* Sepia */ 
.hover09 figure img { 
    -webkit-filter: sepia(100%); 
    filter: sepia(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover09 figure:hover img { 
    -webkit-filter: sepia(0); 
    filter: sepia(0); 
} 

/* Blur + Gray Scale */ 
.hover10 figure img { 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover10 figure:hover img { 
    -webkit-filter: grayscale(100%) blur(3px); 
    filter: grayscale(100%) blur(3px); 
} 

/* Opacity #1 */ 
.hover11 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover11 figure:hover img { 
    opacity: .5; 
} 

/* Opacity #2 */ 
.hover12 figure { 
    background: #1abc9c; 
} 
.hover12 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover12 figure:hover img { 
    opacity: .5; 
} 

/* Flashing */ 
.hover13 figure:hover img { 
    opacity: 1; 
    -webkit-animation: flash 1.5s; 
    animation: flash 1.5s; 
} 
@-webkit-keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

/* Shine */ 
.hover14 figure { 
    position: relative; 
} 
.hover14 figure::before { 
    position: absolute; 
    top: 0; 
    left: -75%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 50%; 
    height: 100%; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    -webkit-transform: skewX(-25deg); 
    transform: skewX(-25deg); 
} 
.hover14 figure:hover::before { 
    -webkit-animation: shine .75s; 
    animation: shine .75s; 
} 
@-webkit-keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 
@keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 

/* Circle */ 
.hover15 figure { 
    position: relative; 
} 
.hover15 figure::before { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 0; 
    height: 0; 
    background: rgba(255,255,255,.2); 
    border-radius: 100%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    opacity: 0; 
} 
.hover15 figure:hover::before { 
    -webkit-animation: circle .75s; 
    animation: circle .75s; 
} 
@-webkit-keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
} 
@keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
} 

</style> 


     <?php 
      $sql = "SELECT * FROM products"; 
      $records = mysqli_query($db,$sql); 

      while ($row = $records->fetch_assoc()) { 



     ?> 
     <div class="hover02 column"> 
     <div style="display: inline-block;"> 
      <figure><img src=<?php echo $row['photo']; ?> style='display: inline-block;'/></figure> 
      <span><?php echo $row['name']; ?></span> 

      </div> 
     <br> 
     </div> 
      <?php 
     } 
     ?> 

    <br> 
    <br> 
<?php 
include 'sale.php'; 

?> 
<br> 
<div class="hover02 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Prodct1</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Prodct1</span> 
     </div> 
    </div> 
<br> 
    <br> 
    <footer> 
     <?php 
      include 'footer.php'; 
     ?> 

    </footer> 
</body> 
</html>

出典

2017-07-02 Ahad Aman Hunzai

+0

この2つの状況でHTMLを比較しましたか？彼らは同じクラスを使用していますか？ –

答えて

1

データベースはfloat:left

クラス column上 
.column { 
    margin: 15px 15px 0; 
    padding: 0; 
    float: left; 
}

を追加し、最初の<div class="hover02 column">のdiv

出典

2017-07-02 06:24:38

+0

固定!!!!!!!あなたを愛してます –

0
後3個の brタグを削除したURLから画像を配置しようとすると

ディスプレイを削除：インラインブロック;あなたの図形属性とdivを作成して、displayを追加します：inline-block;あなたのcloumnクラスで。

.column { 
    margin: 15px 15px 0; 
    padding: 0; 
    display: inline-block; 
    } 
      <div class="hover02 column"> 
        <figure><img src=<?php echo $row['photo']; ?>/></figure> 
        <span><?php echo $row['name']; ?></span> 
      </div>

出典

2017-07-02 06:29:51

関連する問題

 関連する問題