浮頂庫，而無需使用位置

This is my actual result

我想移動藍<div>頂端，而無需使用position，並刪除之間的空間。這可能嗎？

期望的結果：

Final result

這是我已經試過：

#headerwrapper { 
 
    width: 988px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    background: #000; 
 
    padding: 10px 20px; 
 
} 
 
#header1 { 
 
    width: 300px; 
 
    height: 250px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header2 { 
 
    width: 300px; 
 
    height: 450px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header3 { 
 
    width: 300px; 
 
    height: 350px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header4 { 
 
    width: 300px; 
 
    height: 350px; 
 
    float: left; 
 
    clear: left; 
 
    margin-right: 25px; 
 
    background: blue; 
 
}

<div id='headerwrapper'> 
 
    <div id='header1'></div> 
 
    <div id='header2'></div> 
 
    <div id='header3'></div> 
 
    <div id='header4'></div> 
 
    <div id='header5'></div> 
 
    <div id='header6'></div> 
 
</div>

注意，每行項目的數量可能會改變（即，我不知道新線將在哪裏開始）。

來源

2016-01-15 Didier Bignoux

[浮動分隔上變高地CSS]（的可能的複製http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-高度） – Anonymous

看起來你只需要一個負頂部邊距。它也可以幫助你將包裝器轉換成塊元素及其子元素爲內聯塊元素。這樣他們排隊更好。

祝你好運！

#headerwrapper { 
 
    width: 988px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    background: #000; 
 
    padding: 10px 20px; 
 
    display: block; 
 
} 
 
#header1 { 
 
    width: 300px; 
 
    height: 250px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 
#header2 { 
 
    width: 300px; 
 
    height: 450px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 
#header3 { 
 
    width: 300px; 
 
    height: 350px; 
 
    float: left; 
 
    margin-right: 25px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 
#header4 { 
 
    width: 301px; 
 
    height: 350px; 
 
    float: left; 
 
    clear: left; 
 
    margin-top: -175px; 
 
    margin-left: -1px; 
 
    background: blue; 
 
    display: inline-block; 
 
}

<div id='headerwrapper'> 
 
    <div id='header1'></div> 
 
    <div id='header2'></div> 
 
    <div id='header3'></div> 
 
    <div id='header4'></div> 
 
    <div id='header5'></div> 
 
    <div id='header6'></div> 
 
</div>

來源

2016-01-15 19:24:53 Patrick

非常感謝！它確實有幫助：D –

您可以設置一個負頂緣至＃header4。這將推動股價上漲。

最終＃header4風格應該是這樣的：

#header4 { 
width: 301px; 
height: 350px; 
float: left; 
clear: left; 
margin-top: -200px; 
}

的-200px可以更改爲任意數量的需要。

來源

2016-01-15 19:32:42 Wiem

負邊界不太好，因爲很快高度發生變化，它再次破裂，然後盒子可能重疊。 ...可能會更糟;） –

非常感謝你！我真的很有幫助：D –

如果這是一個很好的答案，你能接受它作爲答案嗎？ – Wiem

您可以使用砌體式的解決方案。 Here is a fiddle of the example.如果您需要更多列，請更改column-count,column-width和column-gap。

#headerwrapper { 
 
    width: 100%; 
 
    max-width: 988px; 
 
    margin: 2em auto; 
 
    background: #000; 
 
    padding:10px 20px; 
 
} 
 

 
.cols { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 3%; 
 
    -moz-column-width: 30%; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 3%; 
 
    -webkit-column-width: 30%; 
 
    column-count: 3; 
 
    column-gap: 3%; 
 
    column-width: 30%; 
 
} 
 

 
.box { 
 
    margin-bottom: 20px; 
 
} 
 

 
.box.one { 
 
    height: 200px; 
 
    background-color: #d77575; 
 
} 
 

 
.box.two { 
 
    height: 300px; 
 
    background-color: #dcbc4c; 
 
} 
 

 
.box.three { 
 
    background-color: #a3ca3b; 
 
    height: 400px; 
 
} 
 

 
.box.four { 
 
    background-color: #3daee3; 
 
    height: 500px; 
 
} 
 

 
.box.five { 
 
    background-color: #bb8ed8; 
 
    height: 600px; 
 
}

<div id="headerwrapper" class="cols"> 
 
     <div id="header1" class="box one"></div> 
 
     <div id="header2" class="box two"></div> 
 
     <div id="header3" class="box one"></div> 
 
     <div id="header4" class="box three"></div> 
 
     <div id="header5" class="box four"></div> 
 
     <div id="header6" class="box five"></div> 
 
     <div id="header7" class="box one"></div> 
 
    </div>

來源

2016-01-15 19:46:11

你可以考慮column：

框可能分裂成不同的列

#headerwrapper { 
 
    width: 988px; 
 
    margin: 0 auto; 
 
    background: #000; 
 
    padding: 10px 20px; 
 
    -moz-column-count:3; 
 
    column-count:3; 
 
} 
 
#header1 { 
 
    width: 300px; 
 
    height: 250px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header2 { 
 
    width: 300px; 
 
    height: 450px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header3 { 
 
    width: 300px; 
 
    height: 350px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header4 { 
 
    width: 300px; 
 
    height: 350px; 
 
    margin-right: 25px; 
 
    background: blue; 
 
} 
 
#headerwrapper>div { 
 
    margin:15px 25px; 
 
    /* display:inline-block; */ 
 
    } 
 
#headerwrapper>div:first-child { 
 
    margin-top:0; 
 
    }

<!-- begin top header with images --> 
 

 
<div id='headerwrapper'> 
 
    <div id='header1'></div> 
 
    <div id='header2'></div> 
 
    <div id='header3'></div> 
 
    <div id='header4'></div> 
 
    <div id='header5'></div> 
 
    <div id='header6'></div> 
 
</div>

或不破

#headerwrapper { 
 
    width: 988px; 
 
    margin: 0 auto; 
 
    background: #000; 
 
    padding: 10px 20px; 
 
    -moz-column-count:3; 
 
    column-count:3; 
 
} 
 
#header1 { 
 
    width: 300px; 
 
    height: 250px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header2 { 
 
    width: 300px; 
 
    height: 450px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header3 { 
 
    width: 300px; 
 
    height: 350px; 
 
    margin-right: 25px; 
 
    background: red; 
 
} 
 
#header4 { 
 
    width: 300px; 
 
    height: 350px; 
 
    margin-right: 25px; 
 
    background: blue; 
 
} 
 
#headerwrapper>div { 
 
    margin:15px 25px; 
 
    display:inline-block; /* help to keep all box within a single col .... css rules avoiding breaking seems not yet implemented */ 
 
    } 
 
#headerwrapper>div:first-child { 
 
    margin-top:0; 
 
    }

<!-- begin top header with images --> 
 

 
<div id='headerwrapper'> 
 
    <div id='header1'></div> 
 
    <div id='header2'></div> 
 
    <div id='header3'></div> 
 
    <div id='header4'></div> 
 
    <div id='header5'></div> 
 
    <div id='header6'></div> 
 
</div>

來源

2016-01-15 19:53:21

浮頂庫，而無需使用位置

回答

相關問題