CSS寬度變導致內容擠

的jsfiddle：https://jsfiddle.net/323qLz0y/CSS寬度變導致內容擠

將鼠標懸停在灰色框。瞭解左側面板滑出時的內容是垂直壓扁的？當轉換結束時，內容變成「格式良好」。如何在滑出時讓內容「格式良好」？謝謝。

堆棧需要一些代碼，所以這裏是左面板部分。我嘗試white-space:nowrap，但它強制內容到一個不是我想要的行。

.left-panel { 
width: 0px; 
transition: width 1s; 
float:left; 
overflow: hidden; 
height: 250px; 
} 
.left-panel-slide { 
    width:200px; 
}

來源

2015-10-14 Eric Guan

見我的回答一個簡單的無JavaScript解決方案。 – isherwood

，只需提供寬度爲p和h1達到的效果您正在尋找

$('.middle-panel').on('mouseover', function() { 
 
    $('.left-panel').addClass('left-panel-slide'); 
 
    $('.container').addClass('container-slide'); 
 
}); 
 

 
$('.middle-panel').on('mouseout', function() { 
 
    $('.left-panel').removeClass('left-panel-slide'); 
 
    $('.container').removeClass('container-slide'); 
 
});

.container { 
 
    position: absolute; 
 
    border: 3px blue solid; 
 
    width: 200px; 
 
    height: 250px; 
 
    left: 300px; 
 
    top:30%; 
 
    transition: width 1s, left 1s; 
 
} 
 
.container-slide { 
 
    width: 400px; 
 
    left:100px; 
 
} 
 
.middle-panel { 
 
    background:grey; 
 
    width:200px; 
 
    height: 250px; 
 
    float:left; 
 
} 
 
.left-panel { 
 
    width: 0px; 
 
    transition: width 1s; 
 
    float:left; 
 
    overflow: hidden; 
 
    height: 250px; 
 
} 
 
.left-panel p,.left-panel h1{ 
 
    width:200px; 
 
} 
 
.left-panel-slide { 
 
    width:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="left-panel"> 
 
     <h1> Hello World! </h1> 
 

 
     <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p> 
 
    </div> 
 
    <div class="middle-panel"></div> 
 
</div>

來源

2015-10-14 14:52:09 Akshay

那麼，一個超級簡單的答案是有效的。正是我需要的，謝謝！ SO會讓我接受答案。 –

很高興我可以幫助@EricGuan – Akshay

只是包裝與固定寬度的DIV內滑動的內容。

<div class="container"> 
<div class="left-panel"> 
    <div class="content-wrapper"> 
     <h1> Hello World! </h1> 
     <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p> 
    </div> 
    </div> 
    <div class="middle-panel"></div> 
</div> 

.content-wrapper { 
width: 200px; 
}

https://jsfiddle.net/323qLz0y/

來源

2015-10-14 14:54:13

您必須解決孩子的寬度，像這樣（指的JS的小提琴HTML）：

.left-panel h1, .left-panel p{ 
    width: 200px; 
}

來源

2015-10-14 14:56:01 KCarnaille

這一切都沒有JavaScript或額外的造型在內部非常可行元素。

.container { 
 
    position: absolute; 
 
    border: 3px blue solid; 
 
    width: 200px; 
 
    height: 250px; 
 
    left: 300px; 
 
    top:30%; 
 
    transition: width 1s, left 1s; 
 
} 
 
.middle-panel { 
 
    background:grey; 
 
    width:200px; 
 
    height: 250px; 
 
    float:left; 
 
} 
 
.left-panel { 
 
    width: 180px; 
 
    padding: 10px; 
 
    transition: all 1s; 
 
    overflow: hidden; 
 
    height: 250px; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 
.container:hover .left-panel { 
 
    left: -200px; 
 
}

<div class="container"> 
 
    <div class="left-panel"> 
 
    <h1> Hello World! </h1> 
 

 
    <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p> 
 
    </div> 
 
    <div class="middle-panel"></div> 
 
</div>

Fiddle demo

來源

2015-10-14 14:59:48 isherwood

CSS寬度變導致內容擠

回答

相關問題