有一個div匹配CSS中的內容寬度

我有下面的HTML設置。在inner_container內部，可以有寬度爲500px至50000px的內容。我該如何設置樣式，以便inner_container與內容寬度的確切寬度相匹配？有一個div匹配CSS中的內容寬度

<div id="main_container" class="main"> 
 
    <div id="scrollable_container" style="overflow: scroll; width: 9000px; height: 700px"> 
 
    <div class="inner_container" style="width: 12000px"> 
 
     <!-- Content here can be any widths... from small to reall large --> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-04-16 mikeymurph77

使用'寬度：100％'內容容器 – pbaldauf

這是有效期爲孩子設定爲父系的寬度上，但它不解決的其他方式。 OP正在尋找一種基於孩子寬度動態設置父母寬度的方法。我認爲最好的方法是使用腳本，如果內容是真正動態的。但是，在這裏似乎有一個類似的帖子，它利用了CSS：http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents –

在樣式表中，設置其display到inline-block。

.inner_container{ 
    display:inline-block; 
}

More information on the display property

來源

2015-04-16 14:30:59 Shaggy

首先爲一個更好的做法，從造型分開你的HTML。

在HTML文件：

<div id="main_container" class="main"> 
    <div id="scrollable_container"> 
     <div class="inner_container"> 
      <!-- Content here can be any widths... from small to reall large --> 
     </div> 
    </div> 
</div>

，並在你的CSS文件

#main_container { 
    float: none !important; 
    width: 100% !important; 
} 
#scrollable_container { 
    overflow: scroll; 
    height: 700px; 
    float: none !important; 
    width: auto !important; 
} 
.inner_container { 
    float: none !important; 
    width: auto !important; 
    overflow:hidden; 
    border:2px solid #ccc; /* So you can notice the difference*/ 
}

的!important是以防萬一（覆蓋）。 overflow:hidden;是爲了確保即使內容浮動，inner_container仍保留其內容。

來源

2015-04-16 14:31:45 AliAwwad

嘗試了下：

.inner_container { 
    display:inline-block; 
    width: auto; 
    height: auto; 
    overflow: hidden; 
}

來源

2015-04-16 14:33:33

有一個div匹配CSS中的內容寬度

回答

相關問題