如何設置DIV的寬度以匹配其內容

如果我希望它的寬度與內容的寬度完全相同，如何設置div的寬度。然而，我的DIV中有很多孩子不可避免地崩潰，因爲他們佔用了比div允許的更多的橫向空間。如何設置DIV的寬度以匹配其內容

我有這樣的CSS：

.outer{ 
     width: 100%; 
     background-color: green; 
    } 

    .inner{ 
     width: auto; 
     display: inline-block; 
     margin: 0 auto; 
     background-color: red; 
    } 

    .row{ 
     float: left; 
     width: 250px; 
     background-color: blue; 
     display: inline-block; 
    }

這是我的HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="row">asd1</div> 
     <div class="row">asd2</div> 
     <div class="row">asd3</div> 
     <div class="row">asd4</div> 
    </div> 
    <div class="clear"></div> 
</div>

這裏是我的jsfiddle：http://jsfiddle.net/vullnetyy/pshao68g/

我想在這裏做的是：

紅色的div必須是確切的ÿ一樣寬其第一行中的3周藍色的div
紅色DIV必須綠色DIV
的javascript必須避免
沒有靜態寬度可以被設置爲紅色或綠色的div內居中（因爲這應該是響應的，並且可以提供任意數量的藍色div）

來源

2015-09-01 vullnetyy

你可以看一下新的'flexbox'。這會讓你的任務更容易，但是在所有瀏覽器上都不支持。 – Haneev

只需將'.inner'的背景設置爲透明就可以了。 http://jsfiddle.net/uxtj4tmf/1/ – Boaz

@波茲你沒有解決我的問題 – vullnetyy

這裏有兩個相沖突的問題。

1）您必須有一個設置寬度才能進行margin-left/right auto。

2）如果你漂浮試圖匹配子寬度，你不能做邊緣自動。現在我知道你沒有把內在的浮動留下。但是你確實做了顯示：內聯塊，其中有左浮動和其他一些附加規則。

在這種特殊情況下，您必須妥協一點才能得到您想要的結果。簡單地將.inner設置爲與另一個250px相同，因爲我們知道孩子將會有多大，並刪除顯示：inline-block和PRESTO！

試試這個給你的內在，看看會發生什麼。

.inner{ 
     width: 250px; 
     margin: 0 auto; 
     background-color: red; 
    }

來源

2015-09-01 20:34:27

首先，如果你想中心的元素，你需要使它：

display: block; 
width : %/px; 
margin-left: auto; 
margin-right:auto;

如果你想在3周藍色的div是紅色div中，並正好3藍色= 1red寬度，給出每個藍色33.333％的寬度。

如下面的例子：https://jsfiddle.net/vullnetyy/pshao68g/

來源

2015-09-01 20:46:42 ohadsas

如何設置DIV的寬度以匹配其內容

回答

相關問題