需要讓我的網站與代碼筆版本相同

我從來沒有問過這裏的問題，但我正在努力重新創建從代碼筆到我的代碼的相同對齊方式。我嘗試了很多不同的方式來改變它需要讓我的網站與代碼筆版本相同

如果格式不正確，道歉。

<!doctype html> 
<html class="html"> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="V3index.css"> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<title>Vertebrae index</title> 
<script src="/path/to/masonry.pkgd.min.js"></script> 
<script> 
$('.grid').masonry({ 
    itemSelector: '.grid-item', 
    columnWidth: 1 
}); 
</script> 


</head> 


<body class="body" bgcolor="#650373"> 

<div class="grid"> 
    <div class="grid-item grid-border--colour1"></div> 
    <div class="grid-item grid-border--colour2"></div> 

    <div class="grid-item grid-border--colour4"></div> 
    <div class="grid-item grid-border--colour5"></div> 
    <div class="grid-item grid-border--colour6 grid-item--width2 "></div> 
</div> 






</body> 
</html> 

@charset "utf-8"; 
/* CSS Document */ 

* { box-sizing: border-box; } 

body { font-family: sans-serif; } 

/* ---- grid ---- */ 


/* ---- grid-item ---- */ 
.grid { 
     position: relative; 
     top: 20%; 
     max-width: 600px; 
     min-width: 400px; 
     margin: 0 auto; 
} 




/* clearfix */ 
.grid:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

/* ---- grid-item ---- */ 

.grid-item { 
    width: 260px; 
    float: left; 
    border: 6px solid; 
} 

.grid-border--colour1 { border-color: #ea45ad; margin: 4px; height: 250px;} 
.grid-border--colour2 { border-color: #d5d163; margin: 4px; height: 150px;} 

.grid-border--colour4 { border-color: #0abb2f; margin: 4px; height: 250px;} 
.grid-border--colour5 { border-color: #d27bdc; margin: 4px; height: 150px;} 
.grid-border--colour6 { border-color: #e47d32; margin: 4px; height: 200px;} 



.grid-item--width2 { width: 530px; } 


.grid-item--height1 { height: 644px; }

來源

2016-02-12 Pablo84

郵政codepen鏈接，圖像是無用的 –

更改您的初始化砌體此，

var msnry = new Masonry('.grid', { 
    columnWidth: 1, 
    itemSelector: '.grid-item' 
});

這裏你可以看到一個工作示例：http://codepen.io/anon/pen/EPrvgO

以下HTML在IE Edge和Chrome 48;

<html class="html"> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="V3index.css"> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<title>Vertebrae index</title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
</head> 

<body class="body" bgcolor="#650373"> 
<style> 
@charset "utf-8"; 
/* CSS Document */ 

* { box-sizing: border-box; } 

body { font-family: sans-serif; } 

/* ---- grid ---- */ 


/* ---- grid-item ---- */ 
.grid { 
     position: relative; 
     top: 20%; 
     max-width: 600px; 
     min-width: 400px; 
     margin: 0 auto; 
} 




/* clearfix */ 
.grid:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

/* ---- grid-item ---- */ 

.grid-item { 
    width: 260px; 
    float: left; 
    border: 6px solid; 
} 

.grid-border--colour1 { border-color: #ea45ad; margin: 4px; height: 250px;} 
.grid-border--colour2 { border-color: #d5d163; margin: 4px; height: 150px;} 

.grid-border--colour4 { border-color: #0abb2f; margin: 4px; height: 250px;} 
.grid-border--colour5 { border-color: #d27bdc; margin: 4px; height: 150px;} 
.grid-border--colour6 { border-color: #e47d32; margin: 4px; height: 200px;} 



.grid-item--width2 { width: 530px; } 


.grid-item--height1 { height: 644px; } 
</style> 
<div class="grid"> 
    <div class="grid-item grid-border--colour1"></div> 
    <div class="grid-item grid-border--colour2"></div> 
    <div class="grid-item grid-border--colour4"></div> 
    <div class="grid-item grid-border--colour5"></div> 
    <div class="grid-item grid-border--colour6 grid-item--width2 "></div> 
</div> 
<script> 
var msnry = new Masonry('.grid', { 
    columnWidth: 1, 
    itemSelector: '.grid-item' 
}); 
</script> 
</body> 
</html>

來源

2016-02-12 23:31:42 devfunkd

謝謝您的回覆，似乎代碼顯示代碼筆罰款，但在瀏覽器（或dreamwever） – Pablo84

不會呈現我不能告訴你一個屏幕截圖因爲我的聲譽很低。 – Pablo84

任何人都可以幫忙嗎？謝謝 – Pablo84

需要讓我的網站與代碼筆版本相同

回答

相關問題