CSS div佈局定位

-1

我想根據下面的圖片繪製4個div。CSS div佈局定位

但相反我得到這個。

下面是我的HTML。包裝div的位置設置爲相對，並將包含的div設置爲絕對。但是，它們全都堆疊在一起。謝謝。

\t #container{ 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t .blocks{ 
 
\t \t \t \t width: 200px; 
 
\t \t \t \t height: 100px; 
 
\t \t \t \t border: 1px solid black; 
 
\t \t \t \t text-align: center; 
 
\t \t \t } 
 
\t \t \t #1{ 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t margin: auto auto; 
 
\t \t \t } 
 
\t \t \t #2{ 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t float: left; 
 
\t \t \t } 
 
\t \t \t #3{ 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t float: right; 
 
\t \t \t } 
 
\t \t \t #4{ 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t margin: auto auto; 
 
\t \t \t \t bottom: 20px; 
 
\t \t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
     <title></title> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
\t <body> 
 
     <div id="container"> 
 
\t \t <div class="blocks" id="1">1</div> 
 
\t \t <div class="blocks" id="2">2</div> 
 
\t \t <div class="blocks" id="3">3</div> 
 
\t \t <div class="blocks" id="4">4</div> 
 
     </div> 
 
\t </body> 
 
</html>

來源

2016-12-27 martinbshp

錯字：汽車音響;' – j08691

感謝j08691。我糾正了它。 – martinbshp

1）不允許ID以數字開頭，所以你是1， 2,3等根本沒有被讀取。

2）你拼寫錯高度在.blocks類

3）你並不真的需要絕對定位使用浮動，所以唯一的元素，你可能需要它＃4，我只想用保證金給這個div空間，並使其出現在其他div下面。

我建議你嘗試以下方法：

#container { 
 
    position: relative; 
 
} 
 
.blocks { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 
#a1 { 
 
    margin: 0 auto; 
 
} 
 
#a2 { 
 
    float: left; 
 
} 
 
#a3 { 
 
    float: right; 
 
} 
 
#a4 { 
 
    margin: 200px auto 0; 
 
}

<div id="container"> 
 
    <div class="blocks" id="a1">1</div> 
 
    <div class="blocks" id="a2">2</div> 
 
    <div class="blocks" id="a3">3</div> 
 
    <div class="blocks" id="a4">4</div> 
 
</div>

來源

2016-12-27 14:28:12 Benneb10

#container { 
 
    position: relative; 
 
} 
 
    
 
.blocks { 
 
    width: 200px; 
 
    hight: 100px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 
    
 
#first { 
 
    margin: 0 auto; 
 
} 
 
    
 
#second { 
 
    float: left; 
 
} 
 
    
 
#third { 
 
    float: right; 
 
} 
 
    
 
#fourth { 
 
    margin: 0 auto; 
 
} 
 
    
 
.clearfix:after { 
 
    display: block; 
 
    content: " "; 
 
    clear: both; 
 
}

<div id="container"> 
 
    <div class="blocks" id="first">1</div> 
 
    <div class="clearfix"> 
 
    <div class="blocks" id="second">2</div> 
 
    <div class="blocks" id="third">3</div> 
 
    </div> 
 
    <div class="blocks" id="fourth">4</div> 
 
</div>

這裏我編輯你的代碼，以達到你的目的。你不需要位置絕對在這裏，一切都可以用浮游物來處理，也id='1'將無法正常工作，因爲IDS不能以數字開頭

來源

2016-12-27 14:20:33 godblessstrawberry

在您的問題中發佈您的代碼。如果codepen完成/結束/被阻止，您的答案將失去所有值 – j08691

@ j08691當然，有道理，更新 – godblessstrawberry

希望這是幫助已滿。 https://jsfiddle.net/AwadheshVerma/9wLcLgjc/

<div id="container"> 
    <div class="blocks" id="id1">1</div> 
    <div class="blocks" id="id2">2</div> 
    <div class="blocks" id="id3">3</div> 
    <div class="blocks" id="id4">4</div> 
</div> 

     #container { 
     position: relative; 
     height: 400px; 
     z-index: 1; 
    } 
    #container:after, #container:before { 
     content: ''; 
     position: absolute; 
     right: 0; 
     z-index: -1; 
    } 
    #container:after { 
    top: 150px; 
    left:0; 
    border-bottom: 1px solid #000; 
    } 
    #container:before { 
    border-left: 1px solid #000; 
    top:0; 
    left:50%; 
    bottom:0; 
    } 
    .blocks { 
     width: 200px; 
     height: 100px; 
     border: 1px solid black; 
     text-align: center; 
     position: absolute; 
     background:#ddd; 
     left: 0; 
     right: 0; 
     z-index: 5; 
    } 
    #id1 { 
     margin: 0 auto; 
     top:0; 
    } 
    #id2 { 
     top: 100px; 
    } 
    #id3 { 
     top: 100px; 
     right: 0; 
     left: initial; 
    } 
    #id4 { 
     margin: 0 auto; 
     bottom: 0; 
    }

來源

2016-12-27 14:36:17

嗨，你可以添加一些像`緣此 https://jsfiddle.net/

#container { 
    position: relative; 
} 
.blocks { 
    width: 200px; 
    hight: 100px; 
    border: 1px solid black; 
    text-align: center; 
} 

#first { 
    margin: 0 auto; 
    } 

    #second { 
    float: left; 
} 

#third { 
    float: right; 
} 

    #fourth { 
    margin: 0 auto; 
    } 

    .clearfix:after { 
    display: block; 
    content: " "; 
    clear: both; 
    } 

<div id="container"> 
    <div class="blocks" id="first">1</div> 
    <div class="clearfix"> 
    <div class="blocks" id="second">2</div> 
    <div class="blocks" id="third">3</div> 
    </div> 
    <div class="blocks" id="fourth">4</div> 
</div>

來源

2016-12-27 14:41:09

CSS div佈局定位

回答

相關問題