CSSレイアウトは、私がウェブサイトを作っています

奇妙で、私は最初のコードを表示してみましょう：CSSレイアウトは、私がウェブサイトを作っています

CSS：

<style type="text/css"> 
    body { 
     font-family: "helvetica neue",arial,sans-serif; 
     font-size: 28px; 
     background-color: #edece9; 
    } 
    .card { 
     width: 250px; 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
     text-align: center; 
     float: left; 
     margin-right: 10px; 
     margin-bottom: 11px; 
    } 
    .footer { 
     color: #fff; 
     padding: 10px; 
     font-size: 15px; 
     height: 50px; 
    } 
    .body { 
     padding: 0px; 
    } 
    .body p { 
     margin-left: 5px; 
    } 
    .screen-shot { 
     width: 100%; 
    } 
</style>

HTML：今

<div class="card"> 
    <div class="body"> 
    <img src="" class="screen-shot"> 
</div> 
<div class="footer" style="background-color: #4caf50;"> 
    <p> 
     <a title="查看详情" style="cursor: pointer; color:white">项目名称一</a> 
    </p> 
</div> 
</div>

私はあなたにバグを言わせて、クラス 'body'の 'padding'プロパティは10ピクセル前で、ウェブは次のようになります。

pre viousページ：

カード型ボックスのレイアウトは、それは私が欲しいものです、何も悪いことではありませんが、それは絵の周りに白い詰め物を持って、それがうまく見ていないので、私は「パディング」プロパティを削除します私が望むように、写真には白い詰め物がありません。

間違ったページ：

を、私はそれも間違って、1,2,3ピクセルの「詰め物」を試してみました、バグがそうであるが、別の問題は、空白領域の一部が登場し、生じました奇妙な。私はpicture1のボックスタイプのレイアウトを作りたいと思います。ピクチャにはパディングがありません。問題の記述方法がわからないので、コードとスクリーンショットを投稿します。

出典

2017-08-22 Jianmin Wu

フレックスボックスを使用しない理由は？それはあなたのための多くの問題を解決し、簡単にあなたのサイトを応答させることができます – ctwheels

私たちはそれを把握することができるようにこれをjsfiddleに入れることができますか？ – carinlynchin

問題は画像の高さです。画像の中には、他の画像よりも1つのピクセルの高さが高いものがあり、次のラインの浮遊画像に影響します。埋め込みは画像が縮小されているため（明示的な幅は.cardに設定されています）、そのスケーリングには余分なピクセルがありません。

あなたは、このような画像にheightを設定すると、これを修正するためにいくつかのことを行う、または@ctwheelsは（おそらくフレキシボックス）提案のような溶液を使用することができます。

出典

2017-08-22 17:03:10 chazsolo

.card { 
 
     width: 200px; 
 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
     text-align: center; 
 
     margin-right: 10px; 
 
     margin-bottom: 11px; 
 
     float: left; 
 
    } 
 
    .footer { 
 
     color: #fff; 
 
     padding: 10px; 
 
     font-size: 15px; 
 
     height: 50px; 
 
    } 
 
    .body { 
 
     padding: 0px; 
 
     overflow: hidden; 
 
     height: 200px; 
 
    } 
 
    .body p { 
 
     margin-left: 5px; 
 
    } 
 
    .screen-shot { 
 
     width: 100%; 
 
     padding:0px; 
 
     height: 100%; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<div class="card"> 
 
    <div class="body"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div> 
 

 
<div class="card"> 
 
    <div class="body"> 
 
     <img src="https://c1.staticflickr.com/8/7591/16992834140_99815ee4ac_m.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div> 
 
<div class="card"> 
 
    <div class="body"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div> 
 

 
<div class="card"> 
 
    <div class="body"> 
 
     <img src="https://c1.staticflickr.com/8/7591/16992834140_99815ee4ac_m.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div> 
 
<div class="card"> 
 
    <div class="body"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div><div class="card"> 
 
    <div class="body"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" \t \t \t \t class="screen-shot"> 
 
    </div> 
 
\t <div class="footer" style="background-color: #4caf50;"> 
 
    <p> 
 
     <a title="查看详情" style="cursor: pointer; color:white">项目名一   </a> 
 
    </p> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

カードの静的高さを設定してみてください。画像の高さが異なる場合

出典

2017-08-22 17:16:05 Rajez

CSSレイアウトは、私がウェブサイトを作っています

答えて

関連する問題