CSS如何自動調整div大小？

看看JSFiddle。我不知道，如何在一行中顯示數字並用day 1文本擴大div？請記住，數字數可以不同，所以div的寬度與day 1文本必須適合包含數字的div寬度。有任何想法嗎？CSS如何自動調整div大小？

HTML代碼：

<div class="day-cont left"> 
    <div class="day-name center">day1</div> 
     <div class="less-n-cont"> 
      <div class="number left center ">1</div>   
      <div class="number left center ">2</div>   
      <div class="number left center ">3</div>   
      <div class="number left center ">4</div> 
      <div class="number left center ">5</div>  
      <div class="number left center ">6</div>  
      <div class="number left center last-l-number">7</div>   
     <div class="clear"></div> 
    </div> 
</div>

CSS代碼：

.day-cont { 
    width: 110px; 
} 

.left { 
    float: left; 
} 

.center { 
    text-align: center; 
} 

.day-name { 
    background: linear-gradient(to bottom, #FDFDFD 0%, #EAEAEA 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 

.less-n-cont { 
    width: 100%; 
} 

.day-name, .less-n-cont { 
    min-width: 200px; 
} 

.number { 
    background-color: #FFFFFF; 
    border-left: 1px solid #CCCCCC; 
    display: inline-block; 
    width: 40px; 
} 

.last-l-number { 
    border-right: 1px solid #CCCCCC; 
} 

.clear { 
    clear: both; 
}

我想這個結果

enter image description here

來源

2013-12-10 Tony

當鏈接到jsFiddle.net時，不要試圖避開發布代碼的SO規則。在jsFiddle永遠消失，發生故障等情況下發布你的代碼。 – j08691

刪除'.day-cont'上的寬度 – gvee

@gvee，你是對的，它的工作原理。謝謝 – Tony

爲了得到你的寬度，你需要我會簡單地刪除外部容器的寬度約束。這意味着容器將擴展到其包含的對象的總寬度。

所以從這個：

.day-cont { 
    width: 110px; 
}

要這樣：

.day-cont { 

}

我也與你的代碼撥弄一點點地改進。

而不必添加一個類的最後一個項目，你可以做到以下幾點：

.day-cont .number:last-child { 
    border-right: 1px solid #CCC; 
}

而不必增加額外的</div>末清除的東西，你可以擴展，如上述方法所以：

.day-cont .number:last-child:after { 
    content:" "; 
    display: block; 
    clear: both; 
    height: 0; 
}

全面更新小提琴這裏：http://jsfiddle.net/Tgyru/11/

希望這有助於。

來源

2013-12-10 16:38:10 gvee

試試這個：

<div>Day 1</div> 
<div class="days">1</div> 
<div class="days">2</div> 
<div class="days">3</div> 
<div class="days">4</div>

現在應用CSS爲

div { 
    min-width: 100%; 
} 

.days { 
    max-width: 18%; // just split them into pieces 
    display: inline; // show inline.. 
}

這種方式，一類股利將在行顯示，而另一個將被原樣保留。

寬度將被管理！

對於您通過GVEE提到：刪除類day-count

http://jsfiddle.net/afzaal_ahmad_zeeshan/Tgyru/10/下面是代碼，我剛剛從第一個div去掉頭等艙。

來源

2013-12-10 15:46:09

您可以使用屬性white-space和display:inline-block去除float：

.day-cont { 
    display:inline-block; 
    width: auto; 
} 
.less-n-cont { 
    width: 100%; 
    white-space:nowrap; 
}

演示http://jsfiddle.net/Tgyru/8/

來源

2013-12-10 15:47:17 DaniP

剛剛從你的代碼中刪除下面的CSS和嘗試

.day-cont { 
    width: 110px; 
}

來源

2013-12-10 15:47:31

你可以刪除您的容器大小，或將其設置爲自動。

.day-cont {width: auto;}

要麼工作。

來源

2013-12-10 15:49:35

這種做法可能會爲你工作：

.number { 
    background-color: #FFFFFF; 
    border-left: 1px solid #CCCCCC; 
    display: inline-block; 
    min-width: 32px; 
    padding-left: 3px; 
    padding-right: 4px; 
}

要保持頭「液體」，在.day-cont刪除width: 110px;。另外我不認爲你需要min-width:200px在.day-name, .less-n-cont，因爲它會使你的頭數更少時你的頭數更少。

來源

2013-12-10 15:54:03 ArturBalestro

CSS如何自動調整div大小？

回答

相關問題