html - 속성 - div 너비를 인라인 블록 자식에 맞춤(행당 알 수없는 div 수)



display inline-block 여백 (6)

CSS 만있는 방법으로 보이지 않기 때문에 여기에 몇 가지 간단한 JavaScript가 있습니다.

  1. 일시적으로 부모의 display 스타일을 inline 변경하여 내용에 맞게 축소합니다.
  2. getBoundingClientRect() 사용해, 부모의 폭을 수축에 맞추는 폭으로 설정합니다.
  3. 부모의 기본 display 스타일을 지워서 복원합니다.

단편

var a = document.getElementById('a');
a.style.display = 'inline';
a.style.width = a.getBoundingClientRect().width + 'px';
a.style.display = '';
#a {
  background-color: gray;
}
.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
}
<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

https://ffff65535.com

컨테이너 div (이 예제에서 #a )는 inline-block div 인 자식의 width 에 맞춰야합니다.

행당 div 수는 알 수 없습니다. 이는 화면 크기에 달려 있기 때문입니다.

예를 들어, # a 컨테이너의 오른쪽에 여분의 회색 공간이 없다는 것이 좋습니다.

가능한가? (순수한 CSS주세요)

#a {
    background-color: gray;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>


나는 논평 할 명성이별로 없다. 그래서 내 제안을 여기에 추가했습니다. 이것은 Firefox에서 지원됩니다. 다른 브라우저의 경우에는 확인해야합니다.

#a {
    background-color: gray;
    display: -moz-inline-box;
}


#a:after, #a:before {
    display: table;
    content: "";
}
#a:after{
    clear: both;
}

.b {
    width: 110px;
    height: 110px;    
    float: left;
    background-color: blue;
    border: 2px solid #888;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

표시하려면 여기를 클릭하십시오. -moz-inline-box 데모

표시를 위해 여기를 클릭하십시오 : -moz-inline-box


음, 한 가지 해결책은 media queries 를 사용 media queries .

#a {
    background-color: gray;
    display: block;
    width: 110px;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

@media (min-width: 220px){
    #a {
        width: 220px;
    }
}

@media (min-width: 330px){
    #a {
        width: 330px;
    }
}

@media (min-width: 440px){
    #a {
        width: 440px;
    }
}

@media (min-width: 550px){
    #a {
        width: 550px;
    }
}

@media (min-width: 660px){
    #a {
        width: 660px;
    }
}
<div id="a">
    <div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div>
</div>

JSFiddle


이것 좀 작은 해킹 솔루션을 참조하십시오. 그러나 그것은 당신을 도울 것입니다.

.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
    border: 8px solid gray;
    float: left;
  
}
<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>


이것이 당신이 찾고있는 것이라면 확신 할 수 없으며, 나는 그것을 믿지 않는다. <ie9가 이것을 지원하지만, 당신은 flexbox 모델을 사용할 수있다.

#a {
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
    border: 1px solid #fff;
}
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>


필요에 따라 너비를 조정하는 테이블 또는 인라인 블록의 속성을 사용할 수 있습니다. 하지만 한 줄 이상의 상자가있을 때 문제를 완전히 해결하지는 못합니다.

그래서 그냥 display:table; 추가 display:table; ~ #a

<style>
#a {
    background-color: gray;
    display:table;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
</style>
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>




css