1. ホーム
  2. 質問と答え
  3. HTML CSSが応答し、私が達成しようとしているどのような二つの列

HTML CSSが応答し、私が達成しようとしているどのような二つの列

2017-12-08 7 views
1

HTML CSSが応答し、私が達成しようとしているどのような二つの列

<html> 
 
<head> 
 
<style> 
 
.container { 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

で画像を重ね、応答2列にスタックする効果のthis種類を作っています。 （私の窓のサイズを変更すると、画像が伸びないように）

私はそれをすることはできません。どうやってこの効果を達成することができますか？私はそのフィドルに横に並んで2枚の画像を並べることさえできません。このように常に1列に積み重なっているようです。

enter image description here

私は成功していない、コンテナおよびCOL-LG-6とブートストラップを使用してみました。

出典

2017-12-08 Deividas

+0

質問コードヘルプを検索するには、問題**に** ** [** Stack Snippet **]（** https://blog.stackoverflow.com/2014/09/introducing -runnable-javascript-css-and-html-code-snippets /）。 [**最小限の完全で検証可能なサンプルの作成方法**]（http://stackoverflow.com/help/mcve） –

+0

スニペットを追加しました。フィードバックありがとうございます。 – Deividas

答えて

0

だけブロックをインライン化し、幅が2つの以上のウィンドウがフィットすることができますように設定されていることを確認してください。 Simples。

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <style> 
 
    .container { 
 
     position: relative; 
 
     width: 40%; 
 
     display: inline-block; 
 
    } 
 
    
 
    .image { 
 
     opacity: 1; 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
     transition: .5s ease; 
 
     backface-visibility: hidden; 
 
    } 
 
    
 
    .middle { 
 
     transition: .5s ease; 
 
     opacity: 0; 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     transform: translate(-50%, -50%); 
 
     -ms-transform: translate(-50%, -50%) 
 
    } 
 
    
 
    .container:hover .image { 
 
     opacity: 0.3; 
 
    } 
 
    
 
    .container:hover .middle { 
 
     opacity: 1; 
 
    } 
 
    
 
    .text { 
 
     background-color: #4CAF50; 
 
     color: white; 
 
     font-size: 16px; 
 
     padding: 16px 32px; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    
 
    <h2>Opacity with Box</h2> 
 
    <p>Hover over the image to see the effect.</p> 
 
    
 
    <div class="container"> 
 
     <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="container"> 
 
     <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
     </div> 
 
    </div> 
 
     
 
    </body> 
 
    </html>

出典

2017-12-08 16:41:52

+0

Re：その他の回答：浮動小数点数は、他のソリューションが利用可能な場合のベストプラクティスの問題として一般に推奨されず、予期しない結果につながる可能性があることに注意してください。 Flexboxはこの問題を抱えており、古いブラウザとの互換性を不必要に破壊する危険性があります。 –

+0

この質問はレイアウトを扱うので、OPにこれを防ぐ制限がない限り、フレックスボックス（とグリッド）を推奨する必要があります。 – sol

+0

グリッドはまだ非常に新しい技術であり、私の知る限り、非常に重要なブラウザベースではまだサポートされていません。フレックスボックスの使用は、大規模なプロジェクト、特に開発者がポリフィルなどを実装するのに十分な知識を持つ場合には、しばしば価値があります。多くの点で、グリッドに近い。しかし、一般的に簡単な問題を持つ初心者の方には、より適切な単純なソリューションがあり、基礎を堅く、適切に最初に学習することを優先するアプローチが好まれます。 –

0

それを行うための最も簡単な方法は、floatを使用することです：を残したが、その要素が明確に持っている必要がありますので、あなたが別の要素を追加する必要があり、リセットに文書の流れをWICH：プロパティの両方を。

<html> 
 
<head> 
 
<style> 
 
.container { 
 
    position: relative; 
 
    width: 50%; 
 
    float: left 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div> 
 
<p style="clear: both;"></p> 
 
    
 
</body> 
 
</html>

出典

2017-12-08 16:40:49

1

あなたはコメント

.wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    min-width: 50%; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
    display: block; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
}
<div class="wrapper"> 
 

 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
     <div class="text">John Doe</div> 
 
    </div> 
 
    </div> 
 
</div>

ごとに更新され display: flex

とdivの中にあなたのイメージコンテナをラップすることができ

出典

2017-12-08 16:43:15 sol

+0

イメージを2列に積み重ねる必要があります。これにより、それらをn列に積み重ね、それに応じてサイズを変更します。そんなことをする方法があることを知ってうれしいですが、それは私が達成しようとしているものではありません。 – Deividas

+0

@Deividas回答が更新されました。フレックスボックスの良いガイド：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sol

関連する問題

 関連する問題