Поплавок верхней галереи без использования позиции

Моего текущего, фактического результата:Поплавок верхней галереи без использования позиции

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 Floating дивов при переменных высотах] (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. Это переместит div вверх.

Окончательный # 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

Поплавок верхней галереи без использования позиции

ответ

Смежные вопросы