변환 후 요소에서 남은 공간을 사용하십시오.

10 개의 상자가 있다고 가정 해보십시오. 5 번째 상자에서 마우스를 가져간 다음 왼쪽으로 이동하면 81px (왼쪽으로 이동)되고 오른쪽으로 이동하면 81px 이동합니다 (오른쪽으로 이동).변환 후 요소에서 남은 공간을 사용하십시오.

변환되지 않은 것 (우리가 가리키고있는 것)은 너비가 100 %로 설정되어 있어도 이전과 같은 너비를 유지합니다. 누군가 왜 저에게 설명을 해 주시겠습니까? 변형 된 요소에서 남겨진 공간이 중간의 공간에서 사용될 수없는 이유는 무엇입니까?

당신은 행동에 here

//css: 
.boxwrapper{ 
    display:block; 
    >div{ 
    display:inline-block; 
    border: solid 1px grey; 
    width:auto; 
    padding:20px; 
    background-color:white; 
    &.before{ 
     transform:translateX(-20px); 
    }&.after{ 
     transform:translateX(20px); 
    } 
    } 
} 

//html 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<body> 
<div class="boxwrapper"> 
    <div data-number="1" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 1</div> 
    <div data-number="2" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 2</div> 
    <div data-number="3" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 3</div> 
    <div data-number="4" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 4</div> 
    <div data-number="5" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 5</div> 
</div> 
</body> 
</html>

감사를 볼 수 있습니다.

출처

2017-01-17 as__

요소의 변형 don't affect the flow은 시각적 렌더링 만합니다. div가 더 많은 공간을 확보하고 확장 할 수있는 것처럼 보이지만 실제로는 그렇지 않습니다.

출처

2017-01-17 21:22:48

그래, 그게 내가 의심 스럽지만이 문제에 대한 해결 방법을 알고 계시 니, 아니면이 유일한 시나리오에 내 유일한 친구를 배치 하시겠습니까? –

나는 flexbox를 들여다 보았다. –

변환 후 요소에서 남은 공간을 사용하십시오.

답변

관련 문제