Question

查看JSFiddle。我不知道，如何在一行中显示数字并使用day 1文本展开div？请记住，数字计数可能不同，因此带有day 1文本的div宽度必须适合包含数字的div的宽度。有什么想法吗？

HTML code：

<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

Answer 1

试试这个：

<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..
}

这样，带有类的div将显示在一行中，而另一个将保持原样。

宽度将被管理！

gvee提到你：删除课程day-count

http://jsfiddle.net/afzaal_ahmad_zeeshan/Tgyru/10/这是代码，我刚从第一个div中删除了第一个类。

Answer 2

您可以使用属性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/

Answer 3

只需从代码中删除以下CSS，然后尝试

.day-cont {
    width: 110px;
}

Answer 4

您可以删除容器大小，或将其设置为自动。

.day-cont {width: auto;}

要么应该工作。

Answer 5

这种方法可能适合您：

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

要将标题保持为“液体”，请删除width: 110px;中的.day-cont。此外，我认为min-width:200px中不需要.day-name, .less-n-cont，因为当您的数字较少时，标题会更大。

Answer 6

要根据需要获取宽度，我只需删除外部容器上的宽度约束。这意味着容器将扩展到它包含的对象的总宽度。

所以从这个：

.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/

希望这有帮助。

CSS如何自动调整div大小？

6 个答案: