가변 높이의 CSS 플로팅 Div

가변 높이의 CSS 플로팅 Div [중복]

---

이 질문에 이미 답변이 있습니다.

• 그리드 / 타일보기를 만드는 방법은 무엇입니까? 8 답변

250px 너비의 부모에 맞을 수있는 100px 너비의 div가 무한합니다. 높이에 관계없이 이미지에 표시된 것처럼 div가 행으로 표시되어야합니다. 나는 이것을 해결하려고 시도했지만 div 높이가 그것을 망친 것 같습니다.

도움을 주시면 정말 감사하겠습니다. 감사 :)

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

다음은 jsfiddle입니다.

다음은 내가 javascript https://jsfiddle.net/8o0nwft9/를 사용하여 수행하고 달성 한 것입니다.

---

내가 아는 한, 순수한 CSS (모든 일반적인 브라우저에서 작동)로이 문제를 해결할 방법이 없습니다.

• 수레 가 작동하지 않습니다 .
• display: inline-block 작동하지 않습니다 .
• position: relative와 함께 수동 픽셀 조정 이 position: absolute필요합니다 . 서버 측 언어를 사용하고 이미지 (또는 예측 가능한 높이가있는 항목)로 작업하는 경우 서버 측 코드를 사용하여 "자동으로"픽셀 조정을 처리 할 수 ​​있습니다.

대신 jQuery Masonry를 사용하십시오 .

---

당신의 요구가 당신의 컬러 예제 코드와 더 비슷하다는 가정하에 :

.box:nth-child(odd){
    clear:both;
}

3 행이면 nth-child(3n+1)

---

솔루션 ( Masonry 사용 )을 제공하는 좋은 제품이 있어도 왜 플로트를 사용하여이를 달성 할 수 없는지 명확하지 않기 때문에이 답변을 제공하고 있습니다 .

(이것은 중요합니다- # 1 ).

부동 요소 는 원래 위치에서 가능한 한 왼쪽 또는 오른쪽으로 이동합니다.

따라서 다음과 같이 넣으십시오.

2div가 있습니다.

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

없이 float그들은 다른 아래 하나가 될 것입니다

우리 경우 의이 (가) 라인에 위치 했다,float: rightdiv5div6div5

/*the lines are just for illustrate*/

그래서 지금 우리 float: left가 div6할 수있는 한 왼쪽으로 움직일 것입니다. " in this line "(위의 # 1 참조), 따라서 div5라인을 변경 div6하면 따라갈 것입니다.

이제 방정식에 다른 div를 추가하겠습니다.

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

우리는이

로 설정 clear: right하면 다음 div5과 같은 라인을 사용하도록 강제합니다.div4

그리고 div6오른쪽 어떠했는지 또는 왼쪽이 새로운 라인에 떠 있습니다.

이제 왼쪽에서 오른쪽 으로 중복 된 Forcing div 스택 으로 인해 여기로 온 질문을 예로 들어 보겠습니다.

테스트 할 코드는 다음과 같습니다.

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:40px;
}

.three{
    background-color:orange;
    height:55px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>

위의 이미지에서 당신은 어떻게 볼 수있는 div.5바로 옆에 갖춰져 div.3그 (의 줄 상자에 의해 정의의 라인에 있기 때문입니다 div.4까지 갈 수있다), div.1*, div.2*, 등, 또한 왼쪽 float를 div.5하지만 그들은 적합하지 않는 한 그 줄에서 그들은 다음 줄로 이동합니다 (줄 상자로 정의 됨 div.5)

이제 우리 가 지나가는 방법 div.2*보다 작게 높이를 줄이면 :div.4*div.5*

이것이 왜 이것이 수레를 사용하여 달성 될 수 없는지 명확히하는 데 도움이되기를 바랍니다. " 가변 높이의 CSS 부동 Divs "라는 제목 때문에 인라인 블록이 아닌 부동 소수점 (인라인 블록이 아님)을 사용하는 것만 명확하게 설명합니다. 지금은 대답이 상당히 길기 때문입니다.

---

올바르게 지적했듯이 CSS만으로는 불가능합니다 ... 다행히도 이제 http://isotope.metafizzy.co/ 에서 해결책을 찾았습니다.

문제를 완전히 해결하는 것 같습니다.

---

이 주석 ( CSS Block float left )의 도움으로 답을 찾았습니다.

내가 만드는 모든 "행"에 클래스 이름을 추가합니다 left.
내가 만드는 다른 모든 "행"에 클래스 이름을 추가합니다 right.

그런 다음 각 클래스 이름에 대해 왼쪽으로 떠 있고 오른쪽으로 떠 있습니다!

유일한 문제는 내 콘텐츠 순서가 "오른쪽"행에서 반전된다는 것입니다.하지만 PHP를 사용하여 해결할 수 있습니다.

도움을 주셔서 감사합니다!

#holder{
  width:200px;
  border:1px dotted blue;
  display:inline-block;
}
.box{
  width:100px;
  height:150px;
  background-color:#CCC;
  float:left;
  text-align:center;
  font-size:45px;
}
.one{
  background-color:#0F0;
  height:200px;
}

.two{
  background-color:#0FF;
}

.three{
  background-color:#00F;
  float:right;
}

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}

<div id="holder">
  <div class="box one left">1</div>
  <div class="box two left">2</div>
  <div class="box four right">4</div>
  <div class="box three right">3</div>
</div>
</body>

---

thirtydot 덕분에 이전 답변으로 문제가 제대로 해결되지 않았 음을 깨달았습니다. 다음은 JQuery를 CSS 전용 솔루션으로 활용하는 두 번째 시도입니다.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>

내 솔루션에 남아있는 유일한 문제는 상자가 하나가 아닌 두 상자 너비 일 때 발생하는 일입니다. 나는 여전히이 솔루션을 개발 중입니다. 완료되면 게시하겠습니다.

---

여전히 대안을 찾고있는 사람이 있다면 여기에 있습니다. (-moz-/-webkit-) 열 너비 속성을 사용해보세요. 가변 div 높이 문제를 처리합니다. 그러나 열 너비는 열 끝에 새 div를 추가합니다.

그렇지 않으면 jQuery Masonry가 가장 잘 작동합니다.

---

This may not be the exact solution for everybody but I find that (quite literally) thinking outside the box works for many cases: in stead of displaying the the boxes from left to right, in many cases you can fill the left column first, than go to the middle, fill that with boxes and finally fill the right column with boxes. Your image would then be:

:

If you are using a scripting language like php you can also fill the columns from left to right by adding a new box to it and outputting when all columns are filled. eg (untested php code):

$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;

$col1, $col2 and $col3 can have float:left and width: 33%, set the boxes inside the div to full width and no float.

Obviously if you are using javascript / jquery to load the boxes dynamically you are better of styling them this way as well, as explained in other answers to this thread.

---

표시하려면이 CSS를 div에 넣으면 원하는 레이아웃이 생깁니다. 플러그인이나 JS가 필요하지 않습니다.

 .Your_Outer {
    background-color: #FFF;
    border: 1px solid #aaaaaa;
    float: none;
    display:inline-block;
    vertical-align:top;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 152.5px;
    max-width: 152.5px;
}

요구 사항에 따라 코드를 편집 할 수 있습니다. :)

---

최신 브라우저에서는 다음을 수행 할 수 있습니다.

display: inline-block;
vertical-align: top;

참고 URL : https://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights