이미지가 왜 계속 나오지 않습니까?

이미지 래퍼 (image-wrapper) 클래스를 가진 div 내에서 image-1 클래스의 div를 갖고 싶습니다. 하지만 많이 시도했지만 이미지 1의 클래스는 인라인으로 표시되지 않습니다. 내가 실수를 어디에서하고 있는지 알 수 있습니까? class="image-1"와이미지가 왜 계속 나오지 않습니까?

<style> 
*{ 
    margin:0; 
    padding:0; 
} 
.wrapper{ 
    width:100%; 
    height:400px; 
    background-color:#666; 
    padding:5px; 
    box-sizing:border-box; 
    overflow-x:hidden; 
} 
.image-wrapper{ 
    width:300%; 
    height:390px; 
    background-color:#000; 
} 
.image-1{ 
    width:100%; 
    height:100%; 
    background-color:#03F; 
    float:left; 
    display:inline-block; 
} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="image-wrapper"> 
     <div class="image-1"> 
     </div> 
     <div class="image-1"> 
     </div> 
     <div class="image-1"> 
     </div> 
    </div> 
</div> 
</body>

출처

2014-11-09 user3542577

1) 이미지 - 래퍼에 white-space:nowrap; 설정 이미지-1 요소

2)에서 float:left을 제거

FIDDLE

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    height: 400px; 
 
    background-color: #666; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.image-wrapper { 
 
    height: 390px; 
 
    background-color: #000; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
} 
 
.image-1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #03F; 
 
    display: inline-block; 
 
} 
 
.image-1 + .image-1 { 
 
    background-color: wheat; 
 
} 
 
.image-1 + .image-1 + .image-1 { 
 
    background-color: tomato; 
 
}

<div class="wrapper"> 
 
    <div class="image-wrapper"> 
 
    <div class="image-1"> 
 
    </div> 
 
    <div class="image-1"> 
 
    </div> 
 
    <div class="image-1"> 
 
    </div> 
 
    </div> 
 
</div>

출처

2014-11-09 08:46:09 Danield

감사합니다 – user3542577

div를 폭은 부모 요소 (class="image-wrapper")의 100 %로 설정하고있다.

세 개의 이미지/div를 플로트하려면 width: 33.3% (상위 너비)으로 설정하십시오.

예, 숫자 :

.wrapper has width 300px 
.image-wrapper has width 900px (300% of 300px) 
.image-1 has width 900px (100% of 900px above)

링크 바이올린 : http://jsfiddle.net/8bg8mw53/

을 내가 키우면 정말로 작동하는 방법을 보여주고 싶은 때문에, 당신은 반환 할 수 있습니다 (폭이 20 %가 래퍼 설정 그곳에 100 % 되돌아 간다.) 그리고 같은 이유로 오버플로에 대해 언급했다. 이 속성을 다시 반환 할 수 있습니다.

출처

2014-11-09 08:44:35 panther

당신이해야을 설정하십시오.은 .image-1 ~ 33.3%입니다. 너비는 부모와 관련하여 계산되며 여기서는 .image-wrapper입니다. 자식 된 div는 부모 div의 폭을 초과의

이 JSFiddle

출처

2014-11-09 08:46:43 nisargjhaveri

전체 너비를 참조하십시오. 그것은 나를 위해 일한

*{ 
    margin:0; 
    padding:0; 
} 
.wrapper{ 
} 
.image-wrapper{ 
    width: 300px; 
    background: #fff; 
    white-space: nowrap; 
} 
.image-1{ 
    height: 100px; 
    width: 100px; 
    background: #eaeaea; 
    display: inline-block; 
    position:relative; 
    border-radius:5px; 
}

바이올린 here

출처

2014-11-09 08:51:27 Rasel

이미지가 왜 계속 나오지 않습니까?

답변

관련 문제