CSS，如何停止的元件由容器被壓扁

我想從通過如果只應用樣式直接.outer改變形狀/尺寸當窗口被調整大小爲比.outer S的含量窄停止.outer這是可能的。

HTML：

<div class='outer'> 
    <div class='inner' style='background:#f00'> 
    </div> 
    <div class='inner' style='background:#0f0'> 
    </div> 
    <div class='inner' style='background:#00f'> 
    </div> 
</div>

CSS：

.outer, .inner{ 
    display: inline-block; 
    position: relative; 
    float: left; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    overflow: visible; 
} 

.outer{ 
    /*what to put in here*/ 
} 

.inner{ 
    width:50px; 
    height:50px; 
}

中的jsfiddle

如果調整結果面板更薄，你會看到藍色被推到下一行，其次是綠色的廣場，我希望外部保持其原來的形狀/尺寸，以便三個.inner保持其位置。

來源

2013-08-31 0xor1

你可以在你的'.outer'中加一個'width'。 – putvande

P.S-請注意，如果您將'floating'和'display：inline-block'同時設置爲同一個元素，則內聯塊設置將不會執行任何操作，並且該元素將呈現爲浮動塊。 – Itay

@putvande真的，我應該說，該解決方案需要通用，即任何大小的內容 – 0xor1

的最小寬度設置到容器

使用min-width屬性

.outer{ 
    min-width:150px; 
}

jsFiddle Demo

使用內聯塊顯示能力

更靈活的方式是使用這樣的性質如word-spacing和white-space，取inline-block顯示的優點：

.outer{ 
    white-space: nowrap; 
    word-spacing: -1em; 
}

jsFiddle Demo

來源

2013-08-31 12:17:24 Itay

第二個是贏家，我不會總是知道'.outer'有多大的內容 – 0xor1

@Italy可以我問'-1em'的作用是什麼？或爲什麼這是必要的解決方案 – 0xor1

@ 0xor1我的名字是itay :)。您可以將其刪除並查看。在元素上使用「內嵌塊」顯示時，它們的顯示方式與單詞相似。當你在代碼之間放置空格（或換行符）（如你的div之間）時，瀏覽器會在每兩個元素之間呈現一個空格。字間距走過這個，並使這些空間不可見（當然，你必須給孩子的元素'字間距：正常'，所以你可以在那裏寫正常的文字。 – Itay

這不是「僅應用樣式直接.outer」。但這是另一種選擇。擺脫float: left，將width更改爲min-width，並在.inner上添加display: table-cell可得到所需的結果。

CSS

.outer, .inner { 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    overflow: visible; 
} 
.inner { 
    min-width:50px; 
    height:50px; 
    display: table-cell; 
}

這裏有一個jsFiddle顯示這種方法。

來源

2013-08-31 12:44:05

CSS，如何停止的元件由容器被壓扁

回答

相關問題