CSS-Layout ist seltsam

ich eine Website mache, möchte ich den Code zeigen zuerst:CSS-Layout ist seltsam

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>

Nun lassen Sie mich Ihnen den Fehler sagen, die "padding" -Eigenschaft der Klasse 'body' ist 10px vorher und das Web sieht so aus:

vor vious Seite:

Die Art Karteikästen Layout ist nichts falsch, das ist, was ich will, aber es hat die weiße Polsterung um die Bilder, es nicht gut aussehen, so dass ich entfernen Sie die ‚padding‘ Eigentum von der Klasse "Körper", wie ich es mir wünsche, haben die Bilder nicht die weiße Polsterung. Aber ein anderes Problem entsteht, erschienen einige der leeren Bereiche:

die falsche Seite:

Ich versuchte, die 'padding' in 1,2,3 px, es falsch auch, ist der Fehler so seltsam. Ich möchte das Box1 Layout des Bildes1 machen und die Bilder haben nicht das Padding.Ich weiß nicht, wie man das Problem beschreibt, also poste ich den Code und den Screenshot, sie sind die beste Beschreibung.

Quelle

2017-08-22 Jianmin Wu

Warum nicht flexbox verwenden? Es würde viele Probleme für Sie lösen und Ihnen erlauben, Ihre Website leicht ansprechbar zu machen. – ctwheels

können Sie dies in eine JSFiddle setzen, damit wir es besser herausfinden können? – carinlynchin

Das Problem ist die Bildhöhe. Einige der Bilder scheinen ein einzelnes Pixel mehr als die anderen zu haben, was sich auf die schwebenden Bilder in der nächsten Zeile auswirkt. Das Auffüllen funktionierte, weil die Bilder verkleinert wurden (Sie haben eine explizite Breite auf .card eingestellt) und aufgrund dieser Skalierung hatte das zusätzliche Pixel keine Höhe.

Sie können ein paar Dinge tun, dass zu beheben, wie ein height Einstellung auf den Bildern, oder eine Lösung verwenden, wie vorgeschlagen (möglicherweise Flexbox) @ctwheels.

Quelle

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>

Versuchen Sie für die Karte statischen Höheneinstellung. Die verschiedenen Bildhöhe Gehäuse die Ausgabe

Quelle

2017-08-22 17:16:05 Rajez

CSS-Layout ist seltsam

Antwort

Verwandte Themen