Question

我有一个长div，它按以下顺序包含4个元素：

icon       (fixed width)
item_name  [needs to fit inside]
item_type  [needs to fit inside]
item_date  (fixed width)

我试图找出如何使item_name和item_type适合内部，以便它们始终适合div而不管调整大小。

非常感谢任何帮助。

这是jsfiddle。

HTML

<div class="item">
    <div class="icon"><i class="fa fa-file-text-o"></i></div> 
    <div class="item_date">7:25 AM</div>
    <div style="border-top:1px solid green;width:500px;">
        <div class="item_name">Item name</div>
        <div class="item_type">Item type</div>
    </div>
</div>

CSS

.item {
    margin:0 auto;
    height:50px;
    background-color:#fff;
    width:80%;
    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
.item .icon {
    float:left;
    height:50px;
    width:75px;
    text-align:center;
    border-top:1px solid blue;
    font-size:23px;
    color:#252525;
    line-height:50px;
}
.item .item_date {
    float:right;
    text-align:right;
    width:100px;
    border-top:1px solid blue;
    height:50px;
    padding:0 25px;
    font-size: 13px;
    color:#999999;
    line-height:50px;
}
.item .item_name {
    float:left;
    display: inline-block;
    width:49%;
    height:50px;
    line-height:50px;
    border-top:1px solid purple;
}
.item .item_type {
    float:right;
    display: inline-block;
    width:49%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:bold;
    border-top:1px solid yellow;
}

Answer 1

我会将overflow: auto添加到包含两个浮动块的div.item-panel元素中。设置overflow: auto定义块格式化上下文，并且浮点数包含在块的边缘内，这就是您在这种情况下所需的内容。

.item {
    margin:0 auto;
    height:50px;
    background-color:#fff;
    width:80%;
    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
.item .icon {
    float:left;
    height:50px;
    width:75px;
    text-align:center;
    border-top:1px solid blue;
    font-size:23px;
    color:#252525;
    line-height:50px;
}
.item .item_date {
    float:right;
    text-align:right;
    width:100px;
    border-top:1px solid blue;
    height:50px;
    padding:0 25px;
    font-size: 13px;
    color:#999999;
    line-height:50px;
}
.item-panel {
    border-top: 5px solid green;
    overflow: auto;
}
.item .item_name {
    float:left;
    width:49%;
    height:50px;
    line-height:50px;
    border-top:1px solid purple;
}
.item .item_type {
    float:right;
    width:49%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:bold;
    border-top:1px solid yellow;
}

<div class="item">
    <div class="icon">X</div>
    <div class="item_date">7:25 AM</div>
    <div class="item-panel">
        <div class="item_name">First</div>
        <div class="item_type">Second</div>
    </div>
</div>

Answer 2

好像item的宽度为80％，并且包含icon（75px宽）和item_date（100px宽），每当窗口被挤压时，都会有没有item_name和item_type的空间。

尝试在min-width上设置item，这样它就不会完全崩溃，也不会留下内部div的空间：

.item {
    width: 80%;
    min-width: 400px;
 }

您可能还想在内部div上设置min-width和/或边距，以使其达到您想要的大小。

在可变宽度父div中安装两个div

2 个答案: