浮動後添加div

我已經創建了3個div並排使用浮動，如下所示，但我不確定如何添加一個寬度爲100％的單個div，以及這些下方的某個高度。我試圖簡單地創建一個div但它根本沒有出現，我不知道這是否是一個簡單的編碼錯誤或有更多的東西，我需要做浮動後添加div

.first-div { 
width:33.33%; 
height:150px; 
float:left; 
background-color:pink; 
} 

.second-div { 
width:33.33%; 
height:150px; 
float:left; 
background-color:blue; 
} 

.third-div { 
width:33.33%; 
height:150px; 
float:left; 
background-color:purple; 
}

來源

2017-10-08 SRW7

添加HTML上下文總是用CSS/JavaScript的問題有幫助。請參閱[mcve]。 –

添加clear: both;第四DIV

.first-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
.second-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
.third-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: purple; 
 
} 
 

 
.fourth-div { 
 
    clear: both; 
 
    background: yellow; 
 
    height: 150px; 
 
}

<div class="first-div"></div> 
 
<div class="second-div"></div> 
 
<div class="third-div"></div> 
 
<div class="fourth-div"></div>

來源

2017-10-08 23:48:12 Johannes

.first-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
.second-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
.third-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: purple; 
 
} 
 

 
.fourth-div { 
 
    width: 100%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: black; 
 
}

<div class="first-div">shashi</div> 
 
<div class="second-div">shashi</div> 
 
<div class="third-div">shashi</div> 
 
<div class="fourth-div">shashi</div>

來源

2017-10-08 23:51:07

將前三個Div放在他們自己的div內。將這個新的父div設置爲relative，並將其中的3個div的位置設置爲absolute。

最後，放置一個第四個div，但它自己放在三個集合之後，並將其位置設置爲相對。

這是最簡單的答案，需要更少的輸入，並留下餘地更小的代碼，將在未來的互動

<div id=columnSet> 
    <div class=column></div> 
    <div class=column></div> 
    <div class=column></div> 
</div> 
<div id=singleDiv></div>

的DIV ID = columnSet的寬度設置爲100％和div的干擾內部分別創建33％的列。該div將自動排隊。

祝您好運！

來源

2017-10-09 00:00:37

Clearfix應該是解決您的問題的方法。你可以在這裏閱讀https://www.w3schools.com/css/css_float.asp，我會建議將第一個3個div包裝在clearfix div中。

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

 
.first-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
.second-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
.third-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: purple; 
 
} 
 

 
.last-div { 
 
    margin: 25px 0 0 0; 
 
    height: 50px; 
 
    background-color: green; 
 
    width: 100%; 
 
}

<div class="clearfix"> 
 
    <div class="first-div"> </div> 
 
    <div class="second-div"> </div> 
 
    <div class="third-div"> </div> 
 
</div> 
 

 
<div class="last-div"> </div>

來源

2017-10-09 00:04:11 DukeOfNewYork

還有另一種解決方案，創建一個類.clearfix新<div>元素。

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

或者更好：

.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
} 

.clearfix:after { 
clear:both; 
}

這個技巧將是有益的，每次你想這樣的分離在你的頁面。這種攻擊被用於許多框架（Bootstrap for example）。

/*Clearfix*/ 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content:""; 
 
    display:table; 
 
} 
 

 
.clearfix:after { 
 
clear:both; 
 
} 
 
/*My css*/ 
 
.first-div { 
 
width:33.33%; 
 
height:150px; 
 
float:left; 
 
background-color:pink; 
 
} 
 

 
.second-div { 
 
width:33.33%; 
 
height:150px; 
 
float:left; 
 
background-color:blue; 
 
} 
 

 
.third-div { 
 
width:33.33%; 
 
height:150px; 
 
float:left; 
 
background-color:purple; 
 
} 
 
.forth-div{ 
 
    height:150px; 
 
    background-color:red; 
 
}

<div class="first-div"></div> 
 
<div class="second-div"></div> 
 
<div class="third-div"></div> 
 
<div class="clearfix"></div> 
 
<div class="forth-div"></div>

來源

2017-10-09 00:14:50 Fcmam5

試試這個代碼

<html> 
 
<head> 
 
<title></title> 
 
<style> 
 
.first-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
.second-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 

 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
.third-div { 
 
    width: 33.33%; 
 
    height: 150px; 
 
    float: left; 
 
    background-color: purple; 
 
} 
 

 
.fourth-div { 
 
    width: 100%; 
 
    display: inline-block; 
 
    background: yellow; 
 
    height: 150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="first-div"></div> 
 
<div class="second-div"></div> 
 
<div class="third-div"></div> 
 
<div class="fourth-div" ></div> 
 

 
    
 
</body> 
 
</html>

來源

2017-10-09 11:22:43

浮動後添加div

回答

相關問題