Question

我的html布局中有以下div结构。

<div class='main-container'>
    <h5 class='hotel-name'></h5>
    <div class='hotel-price'></div>
</div>

，每个元素的css如下。

.main-container {
    position: relative;
    border-bottom: 1px solid #EBEBEB;
    height: 55px;
}

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: inline-block;
    white-space: nowrap;
}

.hotel-price {
    display: inline;
    float: right;
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

我没有为任何元素定义任何宽度。每个元素中的内容都是动态绘制的。例如，下图显示了加载所有数据后结构的外观。

enter image description here

但我的问题是，在某些情况下，名称很长，价格下降。

问题的示例图片。

enter image description here

如何解决此问题。我正在使用bootstrap 3.1和我的自定义css构建此布局。

Answer 1

你能更新你的CSS吗？

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: inline-block;
    white-space: nowrap;
    word-wrap: break-word;      // <- New Line
}

以下是 MDN

的参考资料

Answer 2

试试这个，使用clearfix类

<p class="clearfix"></p>

Answer 3

以下是使用Flex框的工作示例。 Flexbox是设计和对齐的新标准。

http://jsfiddle.net/maxspan/t4QuH/

    #mainDiv{
    display:flex;
    flex-wrap: nowrap;
    width: 700px;
    background-color: lightgray;
}
#innerDiv{
    box-shadow:box-shadow: 2px 2px 2px #888888;
    width:200px;
    height:200px;
    border:1px;
    background-color: green;
    padding:12px;
}

Answer 4

如果你只想让价格保持在正确的下角，那么使用浮动并不是一个好主意。 position：某个位置的绝对div：相对div将帮助您更好地定位价格标签。

示例：

.main-container {
    position: relative;
    border-bottom: 1px solid #EBEBEB;
    height: 55px;
}

.hotel-price {
    display: inline;
// ========== Here is the change =================
    position: absolute;
    bottom: 0px;
    right: 0px;
// ===============================================
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

Answer 5

您可以尝试使用display：table-cell css property

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: table-cell;
    white-space: nowrap;
}

.hotel-price {
    display:  table-cell;
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

当没有空间时打破词

5 个答案: