- 背景：父節(jié)點(diǎn)需要固定寬度双藕，子節(jié)點(diǎn)長(zhǎng)度不定矫俺，父節(jié)點(diǎn)overflow-x:scroll;
- 解決方案：
- 1币励、js動(dòng)態(tài)計(jì)算出子節(jié)點(diǎn)的寬度
- 2慷蠕、方法1顯得是有點(diǎn)冗余了，正確的打開(kāi)方式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
width:300px;
overflow-x:scroll;
}
.con{
white-space: nowrap;
width: auto;
}
.a{
width: 200px;
height: 200px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<div class="con">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
</body>
</html>
- 原理：
關(guān)鍵在于：white-space: nowrap;
這個(gè)樣式的作用常用于讓文字不要換行食呻。
這邊這樣寫流炕，就是使子元素中的元素都是inline的狀態(tài)，然后使其不換行搁进，撐開(kāi)父節(jié)點(diǎn)浪感，這樣就能免于js的計(jì)算。
兼容性目前沒(méi)有大面積測(cè)過(guò)饼问，用過(guò)的幾個(gè)場(chǎng)景暫時(shí)沒(méi)有問(wèn)題影兽。
