我的HTML邏輯正確的位置/像素/ div/etc？

我試圖確保我完全理解它。假設我想要一個正好是600像素寬和1000像素高的頁面，並將每個頁面分爲3個等間隔列，每個列的邊界爲1像素。然後div應該各自爲998像素高和198像素寬，並且它們應該被定位爲絕對，其中（0,0），（0,200）和（0,400）各自的（頂部，左側）位置，因爲600像素全身對應於0到599的絕對水平像素位置。這3個div將佔據身體的整個寬度。我不必擔心div的邊距或填充的身體，因爲這些值是無關當絕對定位處於活動狀態時。正確？我的HTML邏輯正確的位置/像素/ div/etc？

這裏是我的代碼：

<html> 

<head> 
    <title>div practice</title> 
    <style type="text/css"> 
     body 
     { 
      height: 1000px; 
      width: 600px; 
     } 
     .outercol 
     { 
      position: absolute; 
      width: 198px; 
      height: 998px; 
      border: solid 1px black; 
     } 
     #co1 
     { 
      top: 0px; 
      left: 0px; 
     } 
     #co2 
     { 
      top: 0px; 
      left: 200px; 
     } 
     #co3 
     { 
      top: 0px; 
      left: 400px; 
     } 
    </style> 
</head> 

<body> 
    <div class="outercol" id="co1"> 
     <p>This text is inside column 1</p> 
    </div> 
    <div class="outercol" id="co2"> 
     <p>This text is inside column 2</p> 
    </div> 
    <div class="outercol" id="co3"> 
     <p>This text is inside column 3</p> 
    </div> 
</body> 

</html>

來源

2014-03-24 user3443528

你測試了嗎？什麼對它不起作用？ – cimmanon

填充移動您的邊框。 – cubrr

這是當你現在添加填充到div的會發生什麼。 DEMO

而是嘗試一下類似於下面的內容。它使用百分比，這使得它有點困難，但從長遠來看它會更好地工作。

HTML：

<div id="container"> 
    <div class="block"> 
     Block 1 
    </div> 
    <div class="block"> 
     Block 2 
    </div> 
    <div class="block"> 
     Block 3 
    </div> 
</div>

CSS

#container { 
    width: 600px; 
    height: 500px; 
    display: block; 
    overflow: auto; 
} 
.block { 
    float: left; 
    width: 31%; 
    padding: 1%; 
    border: 1px solid black; 
}

DEMO

要增加的填充，可以按1％取寬度下來，你有一個額外的1.5％增加至填充。

實施例：

width: 31%; 
padding: 1%;

變得

width: 30%; 
padding: 1.5%;

和同樣適用於其他方式。

希望這一切都很有意義

來源

2014-03-24 23:31:33 Stewartside

我的HTML邏輯正確的位置/像素/ div/etc？

回答

相關問題