Verwenden Sie den Platz links von Elementen nach der Umwandlung

Betrachten wir 10 Boxen haben. Nach dem Schweben in der fünften Box bewegen sich die links davon um -81px (nach links) und die rechten um 81px (nach rechts).Verwenden Sie den Platz links von Elementen nach der Umwandlung

Also die eine, die nicht transformiert wurde (die, auf der wir schweben) hat immer noch die gleiche Breite wie vorher, obwohl ihre Breite auf 100% gesetzt ist. Kann mir bitte jemand erklären, warum der von den transformierten Elementen übrig gebliebene Raum nicht von dem in der Mitte benutzt werden kann?

Sie können es in Aktion sehen 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>

Dank.

Quelle

2017-01-17 as__

Transformationen don't affect the flow von Elementen, nur das visuelle Rendering. Ich weiß, es sieht so aus, als müsste das Div mehr Platz haben und expandieren können, aber in Wirklichkeit nicht.

Quelle

2017-01-17 21:22:48

Okay, das ist, was ich vermutet habe, aber kennst du eine Workaround, oder ist absolute Positionierung mein einziger Freund in diesem Szenario? –

Ich würde in flexbox schauen. –

Verwenden Sie den Platz links von Elementen nach der Umwandlung

Antwort

Verwandte Themen